三分钟看完react-redux

• Redux
• • 设计思想
  • 三大原则
  • Redus组成
  • • State状态
    • Action事件
    • Reducer
    • Store
• 案例展示
• • 准备工作
  • 创建Action
  • 构建Reducer
  • 构建store
  • 使用

Redux

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

设计思想

三大原则

Redus组成

State状态

Action事件

Reducer

Store

案例展示

准备工作

创建Action

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

module.exports = {
    sendAction
}

构建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

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

export default 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;