Redux

actions

• store是整个应用的数据存储仓库，把我们全局管理的状态存储起来
• 它

actions

• actions其实是描述操作的对象，我们调用dispatch时需要传入此对象。
• 它就是我们的后勤保障，是我们打仗的政委，专门管理后勤数据。

reducers

• reducers接收action并更新store。
• 就是action和store交互的中间方。

注意：redux是一个单独的数据流框架，跟react并没有直接的关系，我们也可以在jq等其他的复杂项目里使用redux进行数据管理，当我们不知道是否应该使用redux的时候，我们都是不需要的，因为只有我们很肯定redux能帮助我们管理好复杂项目数据流的时候它才能发挥它的威力，简单的项目我们只需要state+props+contenx就够了。

使用

• 安装redux

npm install redux --save

• 编写使用redux的步骤

1. 从redux引入createStore用来创建数据仓库store。
   • createStore是一个函数，需要传入reducer作为参数，返回值是我们需要的store。
2. 在使用页面引入数据仓库store。
   • 通过getState()方法可以获取到数据仓库里的状态数据state
   • 通过dispath(action)可以触发更改reducer函数。
   • 每次触发dispathch都会触发store.subscribe()方法，用来从新触发页面渲染。

例子1

1. 编写一个store.js

import { createStore } from 'redux'

// 编写reducer
// state默认参数，action操作类型
const myReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add' : {
            return state + 1
        }
        case 'reduce' : {
            return state + 1
        }
        default: {
            return state
        }
    }
}

// 创建数据仓库，把reducer传入createStore
const store = createStore(myReducer)

export default store

2. 编写一个子组件

import React, { Component } from 'react'
import store from './store'

class Redux01 extends Component {
    render() {
        return (
            <div>
                <p>Redux测试</p>
                {/*通过store.getState方法可以获取数据*/}
                <div>{store.getState()}</div>
                <div>
                    {/*改变数据可以调用store.dispatch*/}
                    <button onClick={this.add}>加法</button>
                </div>
            </div>
        )
    }
    add() {
        store.dispatch({ type: 'add' })
    }
}

export default Redux01

3. 修改index.js入口文件

import React from "react"
import ReactDom from 'react-dom'
import App from './App'
// 引入编写好的store
import store from './redux01/store'

// 将渲染函数放到一个render函数
const render = () => {
    ReactDom.render(<App></App>, document.getElementById('root'))
}
// 首次加载执行
render()
// store的state数据每次变更都会执行render，造成页面重绘
store.subscribe(render)

上面的方法操作也很繁琐会照成页面一直刷新，不可取