redux教程及插件用法（一）

redux教程及插件用法（一）

redux简介

redux是一个状态管理工具，redux的三大原则：

1）单一数据源；
2）State是只读的
3）使用纯函数来执行修改

纯函数的概念：
①返回值完全由参数决定，只要是同样的输入，必定得到同样的输出；②不得改写参数；③不能调用系统I/O的API④不能调用Date.now()、Math.random()等不纯的方法(因为每次会得到不一样的结果)。

redux的设计思想：

（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。

什么时候需要用redux？

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

redux的使用

首先，我们需要在项目里下载redux
npm i redux --save
接下来在src目录下建一个store目录，用来放公用数据
store目录下的index.js里：
1）引入createStore，Redux 提供createStore这个函数，用来生成 Store。Store 就是保存数据的地方，你可以把它看成一个仓库。整个应用只能有一个 Store。
import {createStore} from 'redux
2)设置仓库的初始数据
initState={key：value} 这个初始数据会传给纯函数reducer。
3）通过reducer接收初始数据initState，并且存储可加工数据

    reducer(state=initState,action){
        return state
    }

4)创建仓库，让仓库中有state里的数据，把纯函数作为参数传给createStore
var store=createStore(reducer)
5）导出
export default store

为了代码更加优雅，通常把reducer分离出来单独成一个文件，在同目录下建一个reducer.js，把步骤2）、3）剪切过来，再导出reducer，之后在index.js里引入reducer即可。

在任意组件中取数据：先引入store，用store里的getState方法即可取得数据。

store.getState().state(.n)

修改数据：抛发动作：store.dispath()方法，动作是一个对象，这个对象必须含有type属性

    store.dispath({"type":"INCREMENT"})

除了type属性，还可以自定义属性传值给reducer，例如

    store.dispath({"type":"INCREMENT","p":1})

抛发动作完成后，reducer用action来接收（action.type、action.p，action也可以解构为{type,p}）

示例

store>index.js中代码：

import { createStore } from 'redux'
import reducer from './reducer.js'
var store = createStore(reducer)
export default store

store>reducer.js中代码：

var initState = {
    n:1
}
var reducer = (state = initState, action) => {
    switch(action.type){
        case 'INCREMENT':
        // var newState = { ...state };
        // newState.n = newState.n+action.p;
        //return newState
        return {...state,state.n+action.p}
    }
    return state
}
export default reducer

注释的三行代码等同于最后一句的es6写法，{ ...state }是对state的浅拷贝，因为不能直接修改state的值

接下来可以在组件中使用和操作仓库中的值了，比如先拿到仓库中的初始数据n，store.getState().state.n，然后通过一个按钮对它进行简单的抛发动作让它增加。这时需要在组件目录下建一个actionCreator.js文件，用来存储动作。这样做的好处是直观、便于管理。

    export default {
    incAction(p) {
        return {
            type: INCREMENT,
            p
        }
    },
    decAction(p) {
        return {
            type: DECREMENT,
            p
        }
    }
}

在组件中可通过事件处理函数进行抛发动作(在组件内需引入actionCreator，用actionCreator.方法名的方式使用actionCreator中的方法)：

inc = (p) => { store.dispatch(actionCreator.incAction(p) } <button onClick={this.props.inc.bind(1)}>+</button>
这个例子中，当按下按钮，actionCreator就会将这个1和type值传递给reducer，reducer再处理n值，令n值＋1

以上是redux的原生流程部分，要想更好更方便快捷地使用redux，我们需要用到react-redux插件，以及部分高阶组件属性代理的知识，请见下一篇博文“redux教程及插件用法（二）”。