redux 的目录架构
import {createStore,applyMiddleware,combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from "react-redux"
store
1.全局只有一个store通过函数createStore创立 参数是reducer
1.1 createStore(Reducer,applyMiddleware(thunk)); action异步对象
1.2 createStore(combineReducers({key:reducers}),applyMiddleware(thunk)); action异步对象
2. api2.1 diaptch(action)2.2 subacriber(cb) ??有效2.3 getState()组件
1. 须要依据store.getState()获取存储的状态2. 批改须要store.dispatch(action)分发给reducer解决3. redux是能够帮忙你批改state中的状态，然而不会执行render从新渲染界面,render本人调用是有效的 reducer 4. 打工人,收到散发工作立马工作，并且返回最新的state 5. 除了加工，state中的状态的初值也是reducer提供的。会在创立store的时候主动调用reducer dispatch 组件与store沟通的工具人，传递action actionCreator 6. 生产action对象 1.1 同步action对象,是一个js对象，包含type以及data属性 1.2 异步action对象，是一个函数 ?? export const createAddActionAsync = (data,time) =>{ return (dispatch)=>{ setTimeout(()=>{ //store 须要的action 是obj fun无奈让reduces干活没type data // 收到函数（异步工作）的时候 帮忙执行 最初会返回个obj // store须要中间件 redux-thunk 有了它 store能够承受一个函数action dispatch(createAddAction(data)) },time) } };react-redux
1. containComponent connect生成containComponent app 中render containComponent传递store2. uiComponent 不可操作redux 只能借助props操作3. store 4. connect const containComponent = connect(mapStateToProps,mapDiapatchToProps)(UI)5. api [传递状态]mapStateToProps(state) 承受container传递的state 返回状态对象作为props传递给UI组件 [传递操作状态]mapDiapatchToProps(dispatch) 承受container传递的dispatch 返回批改(操作)状态的对象作为props传递给UI组件 mapStateToProps以及mapDiapatchToProps react-redux调用机会6. Provider 容器组件是app的子组件容器组件的store是作为参数穿进去的,多个容器就得传递屡次能够应用Provider 入口应用 Provider 会剖析页面有多少容器组件 传递store7. mapDiapatchToProps 能够是一个对象 提供 action react-redux 会主动帮你分发给store 而后调用dispatch给reducers8. 应用react-redux的能够主动监控state的变动,界面会自动更新。9. combineReducers 参数为对象 value是reducer