Redux

安装

npm install -save redux

redux解决了什么问题？什么情况下需要使用redux？

随着项目的发展，我们的state变得越来越不好管理，它在什么时候发生变化了？为什么改变？等等。redux就是试图让我们的state的变化变得可预测。

那么我们什么时候使用它呢？

• 有大量的交互，或者需要切换不同的身份和场景

• 一个组件的状态需要共享，让其他组件也可以访问或者改变。

• 一个状态需要在全局任何地方都可以访问，甚至在组件中去改变它。

如果项目比较简单，没有涉及到这些，可以视情况而定，不要为了使用而去使用。一切都是选择最合适。

下面说下需要了解的概念。自己理解能力太差了，看了好久，脑袋都大了。

State

State对象包含了所有的数据，而且改变state的唯一方法就是就是触发action。整个state都被存储在一个object tree中，而这个object tree只存在于唯一的store中。

Action

Action是一个对象，而且必须包含type属性。它的作用就是View发出一个通知给store表示State要改变。一般情况下使用store.dispatch把action传到store中。

下面这个对象其实就是一个action：要干什么？添加！添加多少：20！其中type是必须的，其他结构可以自己决定。

const add = {
    type: 'addCount',
    step: 20
}

但是增加多少我们不可能总是写死的20呀，所以我们需要Action创建函数。传入一个要改变的值。

function add(step){
    return {
        type: addCount,
        step
    }
}

store.dispatch()接收一个action创建函数，把它发出去。

store.dispatch(add(10))

Reducer

store接收到action之后，必须返回一个新的State（不能改变当前state，只能返回一个新的），Reducer就是State的计算过程。它接收一个Action和当前State作为参数。

以下代码，如果接收到的action的type属性为addCount，给当前state加上action中的step值并返回。

const redu = (state = 2, action)=>{
    switch (action.type){
        case 'addCount':
            return state + action.step
        default:
            return state
    }
}
export default redu

但是在开发中，因为整个应用只有一个State，所以导致Reducer会非常庞大，我们可以拆分一下。然后使用Redux提供的一个combineReducers方法把他们合并成一个大的Reducer。

比如有一个新的reducer（这里就不写代码了，就叫reduNew）用于计算state中一个其它的属性：

import { combineReducers } from 'redux';
import redu from 'redu.js';
import reduNew from 'reduNew.js'
const appRedu = combineReducers({
    redu,
    reduNew
})
export default appRedu;

Store怎么把接收到的action传递给reducer呢？在创建store的时候可以直接把reducer当做参数传递给Store，这样当接到一个action的时候就会自动调用reducer了。下面我们介绍怎么创建store。

Store：

存放数据的地方，全局只有一个。通过redux提供的createStore()方法来生成，该方法接受一个函数作为参数。把reducer函数传入，以后每当store.dispatch()发送一个新的action就会自动调用Reducer。

createStore()还接受第二个参数，表示最初的State值，通常由服务器给出。

以下代码，引入createStore方法后，创建一个store，把reducer函数传递进去。

import { createStore } from 'redux'
import appRedu from 'appRedu.js'
const store = createStore(appRedu, STATE_FROM_SERVER);

Store提供了三个方法：

• store.dispatch()：之前介绍了，用来把action分发给reducer用于更新state。

• store.getState()：可以获取state

• store.subscribe()：注册监听器，每次state更新都会触发。

//打印初始state
console.log(store.getState());
//监听每次的变化（onAdd事件），并打印
const subscriber = store.subscribe(()=>{
    console.log(store.getState());
})
const render = () => {
    ReactDOM.render(<div>
        <Counter 
            value={store.getState()}
            onAdd={()=> store.dispatch(add(20))}
        />
    </div>,document.getElementById('root'))
}

这里为什么注册监听要赋值到一个常量上呢？因为既然有监听就有取消监听。调用subscribe()返回的函数，就是取消监听器。

//取消监听器
subscriber ();

React和Redux并没有直接关系。Redux只是Web架构的一种解决方案。使用其它框架或者不使用框架也可以使用Redux。在React中使用Redux，我们一般使用react-redux这个中间件。