redux原理及应用

 

redux是一个架构模式/状态管理模式，借鉴了flux，在使用的时候需要去搭建redux结构，本文将着重介绍redux在react中应用。

 Redux思想

1. store是管理全局状态的，视图可以获取到store的状态，视图产生用户操作后会调用actionCreator的方法来生成一个action，将其dispatch派发给store
2. store会将当前的状态和此次的action交给reducer处理，reducer处理后需要返回新的状态，此时store就能得知数据的变化，然后回通知视图获取最新的数据

 Redux三大原则

1. 唯一数据源(整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中)
2.  reducer必须是纯函数（输入必须对应着唯一的输出）
3. State 是只读的, 想要更改必须经过派发action

介绍

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

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

2.Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。

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

4.图解

                                      

 

在react中使用

Redux 默认并不包含 React 绑定库，需要单独安装。

1.安装

//npm 安装
npm install --save react-redux
npm install --save redux

//yarn 安装
yarn add react-redux -S
yarn add redux -S

2.使用

import {createStore} from 'redux'
import {composeWithDevTools } from 'redux-devtools-extension'//谷歌工具 下文会讲
import uuid from 'uuid'//一个生成唯一id的工具

//设置常量
const ADD_THING='ADD_THING'
//设置默认值
const defaultState = {
    things:[
        {title:"吃饭饭",id:uuid(),isFinished:false}
    ]
}
//创建action
const actionCreters={
    addThing(_title){
        let action={type:ADD_THING,title:_title}
        return action;
    }
}

//创建reducer
const reducer=(prevState=defaultState,action)=>{
    //不要修改 state。 使用 Object.assign() 新建了一个副本
    let newState=Object.assign({},prevState);
    switch(action.type){
        case ADD_THING:newState.things.push({
            id:uuid(),
            title:action.title,
            isFinished:false
        }); break;
        default:break;
  }
    return newState;
}

const store =createStore(reducer,composeWithDevTools())

export default store

使用方式注释写的很清楚

3.使用Redux DevTools工具

在谷歌浏览器中下载插件（怎么下载不用说了吧）然后再项目中下载要用的包

//npm 安装
npm install --save-dev redux-devtools

//yarn 安装
yarn add redux-devtools -S

然后再进行如下配置:

import {composeWithDevTools } from 'redux-devtools-extension'
const store =createStore(reducer,composeWithDevTools())

现在你就可以在谷歌浏览器的Redux DevTools工具中看到数据了。