react使用redux

Redux 是什么

Redux 是一个 JavaScript 状态容器，提供可预测化的状态管理

redux的三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

store.dispatch({
    type: 'COMPLETE_TODO',
    index: 1
})

store.dispatch({
    type: 'SET_VISIBILITY_FILTER',
    filter: 'SHOW_COMPLETED'
})

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

Store

现在我们知道 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。

Store 就是把它们联系到一起的对象。Store 有以下职责：

• 维持应用的 state；

• 提供 getState() 方法获取 state；

• 提供 dispatch(action) 方法更新 state；

• 通过 subscribe(listener) 注册监听器;

• 通过 subscribe(listener) 返回的函数注销监听器。

总结：

store存储数据的，action派发事件，action相当于告诉store应该执行什么，并且把数据也传递过去

store接收到action派发的事件后，store把当前的state和action事件转发给reducer(这步react是自动的)

reducer.js代码：

const defaultState = {
    list: ['vue', 'react'],
    value: ''
};

export default (state = defaultState, action) => {
    console.log(action.type === 'change_val')
    switch (action.type) {
        case 'change_val':
            //不能直接修改state，可以拷贝一份返回改变后的数据，返回给store
            return Object.assign({}, state, { value: action.value })
        default:
            return state
    }

}

reducer拿到当前的数据和action，然后返回一个新的数据给store

reducer可以接收state但是不能直接修改state，需要拷贝一份数据，然后修改拷贝后的数据，并且返回

reducer响应action,并且返回新的数据给store

以上看起来好像是reducer修改了store,但实际不是这样的，reducer拿到之前的state，然后生成一个新的state返回给store，其实就是只有store才能改变自己的内容