什么是Redux？

Redux是react中进行state状态管理的JS库（并不是react插件），一般是管理多个组件中共享数据状态。这个是和Vuex是一样的。 

首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。

曾经有人说过这样一句话：

"如果你不知道是否需要 Redux，那就是不需要它。"

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

什么是Redux？

Web 应用是一个状态机，视图与状态是一一对应的。

所有的状态，保存在一个对象里面。

怎么用Redux？

首先安装redux

npm install redux --save

创建一个文件夹store创建index.js文件

代码如下：

import {createStore} from 'redux'
import reducer from "./reducer"

const store=createStore(reducer)

export default store

再在该文件夹下创建一个reducer.js文件

var initState = {
    //状态
    title:"hello redux",
    cart:['react',"vue"]
}

function reducer(state=initState,action){
    switch(action.type){
        //方法
        case 'editTitle':
            return Object.assign({},state,{
                title:action.data
            })
        case "add":
            return Object.assign({},state,{
                cart:['123']
            })
        //默认返回值
        default:
        return state
    }
}

export default reducer

里面可以放状态和一些方法

在App组件中获取redux状态值

import React, { Component } from 'react'
import Store from "../../store/index"
export default class App extends Component {
  static propTypes = {

  }
  constructor(){
    super()
    var s = Store.getState()//获取状态
    this.state={
        s
    }
    Store.subscribe(this.update.bind(this))   // 把update方法注册到监听器  每次状态变化后 调用此方法
  }
  update(){
    var s = Store.getState()
    this.setState({s})

  }
  render() {
    return (
      <div>
        { this.state.s.title }
        <ul>
              {
                this.state.s.cart.map((item,index)=>{

                      return <li key={ index } > {  item  } </li>
                })
              }
          </ul>
      </div>
    )
  }
}

首先引入文件的方法，通过getstate获取之后放到this.state状态值里面

subscribe是一个监听器 监听到数据发生变化之后自动触发定义的update方法 触发之后修改this.state状态值，然后在return状态渲染数据。

触发redux方法 代码如下：

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

export default class App extends Component {
  static propTypes = {

  }
  constructor(){
    super()
    var s = Store.getState()
    this.state={
        s
    }
    Store.subscribe(this.update.bind(this))   // 把update方法注册到监听器  每次状态变化后 调用此方法
  }
  update(){
    var s = Store.getState()
    this.setState({s})

  }
  edit(){
    Store.dispatch({type:"editTitle",data:"rrrrrrrrrrrrrrrrrrr"})
  }
  add(){
    Store.dispatch({type:"add"})
  }
  render() {
    return (
      <div>
        { this.state.s.title }
        <ul>
              {
                this.state.s.cart.map((item,index)=>{

                      return <li key={ index } > {  item  } </li>
                })
              }
          </ul>
          <input type="button" value="修改"  onClick={ this.edit.bind(this) } />
          <input type="button" value="添加"  onClick={ this.add.bind(this) } />
      </div>
    )
  }
}

在上面代码的基础上添加了两个按钮通过点击事件触发两个方法，通过dispatch触发redux文件里定义的方法type是方法名，data是值

以上是redux的基本用法。