来自一个react SPA的总结--redux篇

本文是自己这几天做一个reactSPA的其中之一篇总结，主要总结在实践中，学习到的有关redux的一些思想（并没有太多细节），方便日后自己的重温……..

redux用作管理应用的data-state和UI-state，在react中组件间的通信一般是parent-child间，（兄弟间鉴于我初出茅庐，暂时没遇到），而对于子组件向父组件传递数据，想想都有点难以想象，所以redux很好地解决了这些问题，redux提供了store用来保存自己的应用中所有的state,换句话说就是作为中间的媒介，使得各组件可以通过它来处理别的组件的state，看下图



1.在一个应用中它只有一个

store

**

2.不能直接处理state，处理state的唯一办法就是声明一个action，它描述了state的处理方式，并将它作为store的dispatch方法调用的一个参数：

store.dispatch(action)

可以通过action create方式来调用action



3.reducer通过recive一个state并返回一个新的state来达到更改state的意图，所以在这里请注意，reducer并不是改变原先state，而是通过返回给store一个新的state，来实现相关组件state的改变



4.通过

createStore

来创建一个store并把reducer传入给它，下面以一个简单的一段代码，整合上面的知识

const initial ={
value: 1
}

var reducer = function(state = initial, action){
switch(action.type){
case ADD_VALUE:
return {
value:state.value+1
}
return state;
}

var store=createStore(reducer);

store.disptach({
type:ADD_VALUE,
})

在这里reducer被调用了两次，一次是在创建store后，另一次是在dispatch一个action后。

第一次，创建store后立即调用reducer，并使用了initial作为state的初始值；

第二次，在dispatch一个action后，reducer通过type知道怎样改变state



使用combineReducer来整合多个reducer，然后传给store，因为一个应用中只有一个store哦，不能对每一个reducer创建一个store,示例代码如下：

import {createStore, combineReducers} from 'redux'

const addReducer = function(){}
const deleteReducer = function(){}

const reducers = combineReducers({
addState:addReducer,
deleteState:deleteReducer
});
const store = createStore(reducers);

react和redux的结合使用react-redux提供的provider和connect两个模块，本人不才，初出茅庐，这篇文章有比较详细的介绍，React和Redux的连接react-redux

参考链接：

redux官方文档

Pros and Cons of using immutability with React.js