安装redux

npm install redux

Redux的组成

    就是我们传递的数据，那么我们在用React开发项目的时候，大致可以把State分为三类
    ●DomainDate: 可以理解成为服务器端的数据，比如:获取用户的信息，商品的列表等等
    ●UI State:决定当前UI决定展示的状态，比如:弹框的显示隐藏，受控组件等等
    ●App State: App级别的状态,比如:当前是否请求loading, 
                当前路由信息等可能被多个和组件去使用的到的状态

Action-事件

  Action是把数据从应用传到store 的载体，它是store数据的唯一来源，
  一般来说。我们可以通过 store.dispatch()将action传递给store
  Action特点:
      ●Action 的本质就是一个javaScript 的普通对象
      ●Action 对象内部必须要有一个type属性来表示要执行的动作
      ●多数情况下，这个type会被定义成字符串常量
      ●除了type字段之外。action的结构随意进行定义
      ●而我们在项目中,更多的喜欢用action创建函数(就是创建action的地方)
     ●只是描述了有事情要发生。井没有描述如何去更新state

image.png

Reducer

  Reducer本质就是一个函数，它用来响应发送过来的actions,然后经过处理，把state发送给Store的
  注意:在Reducer函数中，需要return返回值，这样Store才能接收到数据函数会接收两个参数，
第一个参数是初始化state.第二个参数是action

image.png

Store

  store就是把action与 reducer联系到一起的对象
主要职责:
  维持应用的state
  提供getState() 用于获取state
  提供dispatch() 用于发送action
  通过subscribe() 注册监听
  通过 subscribe（）返回值来注销监听

image.png

案例

image.png

const action = {
    type: 'myredux',
    value: '我的第一个redux'
};
const  sengAction = ()=>{
    return action
}

module.exports={
    sengAction
}

image.png

const initState = {
    value:'我是默认的值'
}

const  reducer = (state = initState,action)=>{
    console.log('reducer_State',state)
    console.log('reducer_action',action)

    switch (action.type) {
        case 'myredux' :
                return  action;
        default :
                return state

    }

}
module.exports={
    reducer
}

image.png

import {createStore} from "redux";
//导入创建的reducer

import {reducer} from '../reducer'

//构建store
const store = createStore(reducer)

export default  store

image.png

import React from 'react'

// 导入store
import store from "../store";
// 导入action构造函数
import { sengAction} from '../action'

class name extends React.Component {

    onAction=()=>{
        let action = sengAction()

        // 发送action
        store.dispatch(action)

    }
    componentDidMount() {
        store.subscribe(()=>{
              this.setState({})
        })

    }


    render() {
        return (
           <div>
               <button onClick={this.onAction}>点击发送action</button>
               <h1>{store.getState().value}</h1>
           </div>
        )
    }
}

export {name as default}