单纯的react只是一个视图层框架,写项目是还需要数据管理工具redux;
安装使用
npm install --save redux
英文好的看githup https://github.com/reduxjs/redux;
src目录下创建文件夹store
新建 index.js 和 reducer.js
index.js
import { createStore } from 'redux';
import reducer from './reducer'
const store = createStore(reducer);
export default store;
createStore 创建Store的api
reducer.js
const defaultState = {
inputValue: '123',
list: []
}
export default (state = defaultState) => {
return state;
}
初始的store 中state的初始值
reducer是一个纯函数(给定固定的输入值,就会有一定的输出,且无任何副作用);
reducer的作用就是返回给 store 一个信息 让store修改数据
在组件中获得store数据
在reduce中初始值
const defaultState = {
inputValue: '123',
list: [1, 2, 3]
}
在组件中获取数据
import Store from './store'
使用store提供的getState()方法获取数据
组件中修改store中数据
handleInputChange(e) {
const val = e.target.value;
const action = {
type: 'change_input_value',
value: val
}
Store.dispatch(action)
}
创建 action
通过store提供的dispatch()方法,将组件定义action反应给Store,Store查询reducer
reducer接收action 根据action.type做出反应
因为Sotre是唯一的,且只有store自己可以改变自己的内容 所以在 reducer里对state做了一次copy
const newstate = JSON.parse(JSON.stringify(state));
可以看到store数据已经改变了 但是组件的数据没有刷新
store提供了subscribe()来刷新组件数据
定义方法
handleStoreChange() {
this.setState(Store.getState())
}
在constructor中添加
Store.subscribe(this.handleStoreChange)
这样组件就数据就刷新了
至此store常用的4个方法就全部使用了
createStore(): 创建store
getState():组件获取store中的数据
dispatch():组件传递信息给store(store在传递给reducer,reducer返回信息给store;store做出改变)
subscribe():组件根据store更新数据
actionCreator和actionTypes
在store文件夹下创建 actionCreator.js&actionTypes
actionTypes.js
相应的reducer和组件也做改变
这样写的好处是便于管理,出错了也会log出来。。。
再说说着这
组件要更新数据 调用actionCreater方法 dispatch给store, store 传给reducer ,reducer做出反应, store改变,通过subscribe给组件数据
redux中间件
react项目中的中间件一般都是redux的中间件。。。不是react本身的中间件;
这里中间件都是action与reducer之间的
redux-thunk
安装
npm install --save redux-thunk
使用
因为还要兼容redux在chrome的插件 所以麻烦点
这是不使用中间件请求模拟数据
用Charles 模拟的
使用thunk
直接在actionCreator中进行数据请求
在组件中
直接调取在actionCreator中定义的getdatalist方法 然后dispatch就可以了
redux-thunk简单的解释就是让actioncreator的方法中不仅仅可以返回一个对象 还可以是一个函数,如果是对象的话会直接丢给store在到reducer中做处理,如果是函数的话就会先执行函数再丢给store到reducer中做处理;
redux-saga
安装
npm install redux-sage --save
在store index.js下引用saga
记得sagaMIddleware.run(sagas)哦
在组件中请求模拟的数据
使用redux-sage
在actioncreator 新建一个方法
在组件中调用
这里不仅仅是reducer可以接受到这个dispatch这个action, 在saga也可以
在
function* mySaga() {
yield takeEvery(GET_INIT_DATA_INIT, getInitdata);
}
调用saga中 takeEvery()方法。 接收2个参数第一个是ation.type 另一个是接收到后调用generator函数名
通过
const res = yield axios.get('/api/todolist')
const action = initData(res.data)
得到请求数据 新建action
调用saga中 put函数将这个action 发给stroe给reducer做处理
redux-saga 简单的来说拦截组件dispatch出的action 判断action的type的来做出新的反应生成新的 action 返回给store
saga用的都是generator函数 比较不适应。。。提供的api也很多。。。
适合大项目使用。。。。。。。。小项目安心使用redux-thunk吧 简单。。。
react-redux
安装
npm install react-redux --save
使用
在项目的index.js 引用
使用react-redux 中Provider组件 包住使用store的组件 再把store 引入并使用
provider 就是链接store的一个提供器 让其内部的组件都可以获取store
在组件中使用react-redux提供的api connect()
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
connect(fuc1: store和组件的关联, fuc2:对store数据修改的方法和dispacth关联)(组件名)
搞定 react的一般基础就到这了 实战吧干巴爹