redux

Redux

Redux 是一款著名 JavaScript 状态管理容器,提供与可预测的状态管理。
Redux 除了跟 React 配合使用，还可以配置 JS 、Vue 使用。

设计思想

❶Redux 是将整个应用状态存储到一个叫做 store 的地方，里面存在一个状态树 state tree
❷组件可通过 store.dispatch 派发行为 action 给 store, store 不会直接修改 state, 而是通过用户编写的 reducer 来生成新的 state ，并返回给 store
❸其它组件通过订阅 store 中的 state 状态变化来刷新自己的视图

三大原则

❶整个应用有且仅有一个 store, 其内部的 state tree 存储整个应用的 state。
❷state 是只读的，修改 state只能通过派发 action，为了描述 action 如何改变 state 的，需要编写 reducer 纯函数。
❸整个应用的state被存储在一颗object tree中，并且这个object tree只存在于唯一一个store中单一数据源的设计让 React 组件之间通信更加方便，也有利于状态的统一管理。

Redus组成

State状态

DomainState:服务器返回的State
UIState:当前组件的State
APP State：全局的State

Action事件

本质就是一个JS对象
必须要包含type属性
只是描述了有事情要发生，并没有描述如何去更新state

Reducer

本质就是函数
响应发送过来的action
函数接收两个参数，第一个是初始化，第二个是发送过来的action
必须要有return返回值

Store

用来把action和reducer关联到一起的
通过createStore来创建Store
通过subscribe来注册监听

案例展示

准备工作

安装redux
npm install redux

创建Action

创建一个action.js文件用于创建Action
利用return在Action创建函数中返回Action对象，必须携带type属性
将Action创建函数导出

const sendAction = ()=>{
    //返回一个Action对象、
    return{
        type:'action-type',
        value:'我是一个action '
    }
}

module.exports = {
    sendAction
}

构建Reducer

创建一个reducer.js文件，用来构建reducer，reducer需要接收两个参数
第一个参数是state，可以先初始化一个state，然后进行赋值
第二个参数是判断action的type值是否是我们发送的，如果是的话，通过return返回新的state
把reducer导出

const initstate = {
    value:'默认值'
}
const reducer = (state = initstate,action)=>{
    console.log('reducer',state,action)
    switch (action.type){
        case 'action-type':
            //合并Action和state
            return Object.assign({},state,action)
        default:
            return state;
    }
}
module.exports = {
    reducer
}

构建store

创建store.js文件，用来创建store
createStore函数里面第一个参数接收的是reducer
createStore的返回值就是构建好的store
然后将store导出

import {createStore} from "redux";
//导入reducer
import {reducer} from './reducer'
//构建store
const store = createStore(reducer);

export default store;

使用

创建Home.js用于页面使用
给页面创建一个button按钮用于发送Action
在点击事件中通过store.dispatch发送Action
注册监听，通过store来进行监听器的注册，返回值可以用来销毁监听

import React from "react";

//导入store
import store from "./store";
//导入action
import {sendAction} from './action'

class Home extends React.Component{
    handleClick=()=>{
        const action = sendAction()
        //发送一个Action
        store.dispatch(action)
    }
    //注册监听
    componentDidMount() {
        store.subscribe(()=>{
            console.log('subscribe',store.getState());
            this.setState({});
        })
    }

    render() {
        return <button onClick={this.handleClick}>点我发送Action</button>
    }
}

export default Home;