react难点—逆战

一：模块划分

为了能解决命名冲突问题，同时模块功能更加清晰，个人认为需要掌握react中模块划分这一知识点

第一步：建立模块组件自身的reducer.js

和之前的reducer.js写法一致

//1)初始化state
var initState={
key:value
}
//2)创建reducer,并且给state初始化值
var reducer=(state=initState,action)=>{
//3)根据action的类型type做不同的逻辑代码
...
//4）返回state
return state
}
//5)导出
export default reducer;

第二步：在store文件夹下的reducer.js里，结合所有组件的reducer，并且划分模块名

1）需要导入combineReducers（）辅助函数

import {combineReducers} from 'redux'

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。

2）导入其他组件的reducer.js

将其他组件的reducer.js引入，并且命名唯一！

例：

import aReducer from '路径'
import bReducer from '路径'

3）使用combineReducers（）辅助函数结合起来

var reducer=combineReducers({
模块的名字：引入的模块reducer
a:aReducer,
b:bReducer
...
})

4)最后记得导出reducer

export default reducer

第三步：取模块里面的值

模块名.key就行啦，记得加模块名哦

二.react使用redux后的异步操作

在actionCreator里面

插件：redux-thunk

//但不是唯一解决异步的方式，原理简单，但是项目大了就比较乱

//还有就是redux-saga

1.安装redux-thunk

yarn add redux-thunk

2.引入applyMiddleware中间件

在store里的index.js

import {applyMiddleware} from ‘redux’

3.引入redux-thunk

在store里的index.js

import thunk from ‘redux-thunk’

4.使用中间件

var store =creatorStore(reducer,applyMiddleware(thunk))

5.在actionCreator里面发起异步async请求

写异步方法，返回回调函数，参数是dispatch（中间件传递过来的）

asyncAction(){
return (dispatch)=>{
发出异步请求，成功后在异步动作回调里，用dispatch发出动作给reducer
}
}

还有更多需要掌握的知识点，日后再更