Redux 小小入门

Action:

 store.dispatch() action → store action

• 本质js对象
• type表示将要执行的动作(必须)
• index引用指定任务

action创建函数:

• 生成action的方法

dispatch (action创建函数结果)或a= b => dispatch( action创建函数(b)); 
a(b)；

• 也可用react-redux的 connect()
• BindActionCreators()：绑定多个action创建函数到dispatch()

Reducer:

• 响应action并发送到store

(PreviousState, action) =>newState

• 不要在reducer里：1修改传参2执行有副作用的操作如API请求和路由跳转3调用非纯函数
• Object.assign(target,...source):将target与source连接到target上,注意不要用此改变state
• CombineReducers({reducer函数列表})：调用reducer并将生成的结果合并成一个大对象

CombineReducers({
a: doSomethingWithA,
b: processB,
c: c})

等价于

reducer( state={}, action){
return{
a: doSomethingWithA( state.a, action),
b: processB( state.b,action),
c: c(state.c,action)})

Store:

• 维持、获取getState()、更新dispatch(action) state,注册subscibe(listener)、注销(通过注册返回的函数)监听器
• store = createStore( reducer) ：createStore接受reducer作为参数生成一个新store。以后每当
• store.dispatch：发送过来一个新action就会自动调用reducer得到新state
• createStore( reducer,参数2)：参数2可选用于设置state初始状态

数据流:单向

React之容器组件和展示组件

• 容器组件仅仅做数据提取,然后渲染对应子组件
• 展示组件描术如何展现(⻣架样式)可能包含回调函数

React-redux:

<Provider store>使组件层级中的connect( )方法能获得redux store

• connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])：连接react组件与redux store,连接操作不会改变原来的组件类反而返回一个新的已连接的组件类
• mapStateToPtops(state,[ownProps]):stateProps         当redux store发生变化该函数被调用,且必须返回
• 一个纯对象,这个对象会与组件props合并. 若有第2个参数则该参数作为传递到组件的props,且只要组件接收到新props,mapStateToProps也会被调用
• mapDispatchToProps(dispatch,[ownProps]):dispatchProps     成为后组件的props
• connect(args)(后组件)
• 将action作为props绑定到组件上也会
• 中间件:用于异步操作
• 异步:action有3种发起时、成功时、失败时, state也需改造反映不同操作状态
• redux-thunk改造strore.dispatch使其可接受函数作为参数
• redux-promise接受promise对象

相关API:

createStore( reducer,[preloadedState],enhancer):reducer
参数2:初始时state
参数3:可为使用中间件
applyMiddlewares():将所有中间件组成数组依次执行

小总结:

1先来一个展示组件(自己写),写好需要的组件和state以及函数
2写映射即mapStateToPtops和mapDispatchToProps
3写具体action, 23可换序
4 connect生成容器组件
5写reducer即具体操作
6createStore生成store,此时可使用注册监听器
7 Provider包裹根组