Redux的梳理

学习Redux之前,我了解了它需要去解决什么问题:

• 用户使用方式复杂
• 不同身份不同使用方式
• 多个用户可以协作
• 与服务器大量交互,或者使用websocket
• 视图数据从多个来源获取
• 共享组件状态
• 组件之间可以改变状态

Redux相比于的React特点是多交互,多数据源.根据文章,得出一句话:Redux应用具有唯一的Store,一个State对应一个View,View导致了State的变化,改变State的唯一方法是Action对象,store.dispatch()是View 发出 Action 的唯一方法.

• 生成Store的方法:import {createStore} from 'redux';  const store = createStore(fn);fn返回新生成的对象,如果createStore再给一个参数,那么第二个参数将会变成整个应用的状态初始值,并且会覆盖Reducer方法的默认初始值
• View发出Action的方法:store.dispatch();
• 调用Reducer的方法:const store = createStore(reducer);reducer的两个参数分别是state和anction
• 由于Reducer是纯函数,所以State不能任意改变,但是可以定义多个reducer从而得到多个不同的State,而且与View对应的State总是不变
• 监听State的方法:store.subscribe(listener);  相应解除监听的方法:unsubscribe();

Reducer方法负责生成State,由于整个应用只有一个State对象,所以可以使用Reducer方法拆分的形式,化整为零,然后各个方法处理完之后,再使用combineReducers方法将这些Reducer整合起来,有两种的书写形式:

1.非自定义名称

import {combineReducers} from 'redux';

const chat = combineReducers({

chat1,

chat2

})

2.自定义名称

import {combineReducers} from 'redux';

const chat = combineReducers({

a:A,

b:B

})

如果项目中使用的Reducer非常多,那么完全可以放入一个文件中,使用类似于以下代码的方式统一引入:

import {combineReducers} from 'redux';

import * as reducers from './path';

const reducer = combineReducers(reducers);

React + Redux依照作用分文件的形式：“actions”、“constants”、“reducers”、“containers” 以及 “components”

中间件的使用可以方便的添加流程功能,其实现主要在发出Action到Reducer之间,即重写store.dispatch()方法,以下代码是调用方式:

 import {applyMiddleware,createStore} from 'redux';

 import createLogger from 'redux-logger';//借用redux-logger组件

 const logger = createLogger();

 const store = createStore(

   reducer,

   //假设这里存在参数,那么就是上次所说的全局初始化状态initial_state

   applyMiddleware(logger) //需要注意的是,中间件参数是有次序要求的,一般logger是放在最后

 );

异步操作出现出现的action也会相应的增多至三种,发送/成功/失败,同时必须重新对action的写法进行调整,也就是添加相应的状态和返回参数,如:{type:'fetch',status:'error',error:'err'}.除了action,state也是需要进行改写的,常用的是isFetching(数据抓取判断)和didInvalidate(数据是否过时).

在异步操作时,第一个action是同步触发的,那么第二个action只有通过异步的形式了,利用动作生成器Action Creator,将第一个动作执行完后的结果进行转换,转换为json格式,然后自动再次发出一个action.store.dispatch()的参数仅能够是对象的形式,因此不可以使用函数,可以通过redux-thunk中间件来实现参数使用函数,利用上面所说的applyMiddleware(thunk)的方式,前提肯定是需要import插件的.这是通过写Action Creator返回函数的方式,借助redux-thunk中间件改造dispatch实现异步方案;还可以通过redux-promise中间件改造dispatch,这时Action Creator返回的参数使用Promise对象,还有一种写法将Action对象的payload属性写成Promise对象.

React-Redux将所有的组件分为两大类:UI组件和容器组件,二者区别很明显,如果二者同时处于一个组件中的话,是容器组件包含UI组件.

• UI组件无状态,所有的数据都由this.props提供,不使用Redux的API
• 容器组件带有内部状态,负责管理数据

连接UI组件和容器组件的桥梁是connect()方法:

 import {connect} from 'react-redux';

 const VisibleTodoList = connect(

   mapStateToProps,//此函数返回一个对象,第一个参数为state,第二个参数代表容器组件的props对象

   mapDispatchToProps //定义用户操作,可以是函数,也可以是对象,如果是函数,那么会得到dispatch和ownProps两个参数

 )(TodoList);//connect的第一个参数是输入逻辑,它将state映射到props,第二个参数是输出逻辑,用户对UI的操作映射成Action

我在理解mapStateToProps和mapDispatchToProps时,借助这篇详细的文档所理解通的:http://www.imooc.com/qadetail/197244?lastmedia=1

在connect方法生成容器组件后,使用React-Redux的Provider组件获取state,工作原理是React组件的context属性,使用方法如下:

 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import reducer from './reducers'
 import App from './components/App'

 let store = createStore(todoApp);
 render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )