对react里的redux简单理解

redux理解

• redux包含四部分

1. actions.js包含前端所需发请求的异步和同步函数工厂

   //异步
    export const xxx=(...)=>{
        return dispatch=>{
            ...//做一些处理，在这里发送Ajax请求，将后端得到的数据在这里通过dispatch分发
               //一个同步action出去并在reducers里面进行数据状态的最后处理与管理
                //每一个异步action都会对应一个同步action
            dispatch(xxxT(...(要传的数据)))
        }
    }
    //同步
    const xxxT = (...)=>({type:(标记类型),data:{...}})

2. reduces.js是state状态管理与处理工厂

 	import {combineReducers} from 'redux'
    function  XXXR (state=initData,action){
        //actions.js里面的函数所传的数据会传送到action对象里,
        //action里面有两个重要的属性，type,data
        switch(action.type){
            case 1:
            ...
            default: 
            return state;
        }
    }
    export default combineReducers({
        XXXR //reducer最终要暴露出去的所有处理的函数的处理结果
    })

3. store.js,redux的管理总部，该js文件写定后基本保持不变

 	import {createStore,applyMiddleware} from 'redux'
    import thunk    from 'redux-thunk'//实现异步
    import {composeWithDevTools} from 'redux-devtools-extension'//redux的浏览器插件使用
    import reducers from "./reducers";
    
    export default	createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))

4. actions-type.js文件里面主要存储的是action里面分发reducer的type标记符号