React - 27 redux基础操作和思想

1.redux

2.redux的使用

除了上述5步，还需要其他知识配合

src/store/index.js

import { createStore } from "redux";

// 管理员：修改store容器中的公共状态
let initial = {
  supNum: 10,
  oppNum: 5
}
const reducer = function reducer(state = initial, action) {
  // state:存储STORE容器中的公共状态「最开始没有的时候，赋值初始状态值initial」
    // action:每一次基于dispatch派发的时候，传递进来的行为对象「要求必须具备type属性，存储派发的行为标识」
    // 为了接下来的操作中，我们操作state，不会直接修改容器中的状态「要等到最后return的时候」，我们需要先克隆
    state = { ...state };
    // 接下来我们需要基于派发的行为标识，修改STORE容器中的公共状态信息
    switch (action.type) {
        case 'VOTE_SUP':
            state.supNum++;
            break;
        case 'VOTE_OPP':
            state.oppNum++;
            break;
        default:
    }
    // return的内容，会整体替换STORE容器中的状态信息
    return state
}
// 创建store公共容器
const store = createStore(reducer)
export default store

为了在各个组件中，都可以把创建的store获取到，我们可以基于上下文的方案:

1.在index.isx中，基于ThemeContextProvider把创建的store放在上下文中

2.因为所有组件最后都是在index.jsx中渲染，所有组件都可以理解为

index.jsx的后代组件，基于上下文方案，获取在上下文中存储的store就可以了!!!

Vote.jxs

这种写法不行，函数组件只会更新一次

修改-->

再次修改

import React, { useContext, useState, useEffect } from "react";
import './Vote.less';
import VoteMain from './VoteMain';
import VoteFooter from './VoteFooter';
import ThemeContext from "../ThemeContext";

const Vote = function Vote() {
    const { store } = useContext(ThemeContext);
    // 获取容器中的公共状态
    let { supNum, oppNum } = store.getState();

    /* // 组件第一次渲染完毕后，把让组件更新的方法，放在STORE的事件池中
    let [num, setNum] = useState(0);
    const update = () => {
        setNum(num + 1);
    };
    useEffect(() => {
        // let unsubscribe = store.subscribe(让组件更新的方法)
        //   + 把让组件更新的方法放在STORE的事件池中
        //   + 返回的unsubscribe方法执行，可以把刚才放入事件池中的方法移除掉
        let unsubscribe = store.subscribe(update);
        return () => {
            unsubscribe();
        };
    }, [num]); */
    let [_, setNum] = useState(0);
    useEffect(() => {
        store.subscribe(() => {
            setNum(+new Date());
        });
    }, []);

    return <div className="vote-box">
        <div className="header">
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num">{supNum + oppNum}</span>
        </div>
        <VoteMain />
        <VoteFooter />
    </div>;
};

export default Vote;

VoteMain.jsx

VoteFooter.jsx

3.总结:

redux具体的代码编写顺序

1.创建store，规划出reducerT当中的业务处理逻辑可以后续不断完善，但是最开始reducer的这个架了需要先搭建取来]

2.在入口中，基于上下文对象，把store放入到上下文中;需要用到store的组件，从上下文中获取! !3.组件中其丁store，完成公共状态的获取、和任务的派发+ 使用到公共状态的组件，必须向slore的事件池中加入让组件更新的办法;只有这样，才可以确保，公共状态改变，可以让组件更新，才可以获取最斯的状态进行绑定!!