redux简单使用

redux核心是 state、action、reducer、store
state保存数据状态，子组件可以从这里获取到数据状态（getState()） action是组件对state数据要做出的动作 reducer,组件通过dispatch()带上action来改变state中的数据。 创建一个仓库文件，使用上下文Context，为子组件共享store
context.js

import React from 'react';
import { createStore } from 'redux';

// state
let initState = {
    count: 5,
};
//action
//reducer
function appReducer(state = initState, action) {
    console.log(111);
    switch (action.type) {
        case 'ENCREASE':
            console.log(222);
            return { ...state, count: state.count + 1 };
        case 'DECREASE':
            return { ...state, count: state.count - 1 };
        default:
            return state;
    }
}

//store
export let store = createStore(appReducer);
// context  为子组件提供共享stroe
let StoreContext = React.createContext(store);
export default StoreContext;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyCompoenet1 from './Components/MyCompoenet1';
import MyComponent2 from './Components/MyComponent2';
import StoreContext, {store} from './Context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <StoreContext.Provider value={store}>
        <MyCompoenet1></MyCompoenet1>
        <MyComponent2></MyComponent2>
    </StoreContext.Provider>
);

MyCompoement1.js

import React, { useContext, useState } from 'react';
import StoreContext from '../Context';

export default function MyCompoenet1(props) {
    // 使用useContext钩子
    let ctx = useContext(StoreContext);
    let [count, setCount] = useState(ctx.getState().count);
    ctx.subscribe(() => {
        setCount(ctx.getState().count);
    });
    return (
        <React.Fragment>
            <div>MyCompoenet1 {count}</div>
        </React.Fragment>
    );
}

MyCompoement2.js

import React, { useContext } from 'react';
import StoreContext from '../Context';

export default function MyComponent2() {
    const ctx = useContext(StoreContext);
    return (
        <React.Fragment>
            <div>MyComponent2</div>
            <button onClick={() => ctx.dispatch({ type: 'ENCREASE' })}>+</button>
            <button onClick={() => ctx.dispatch({ type: 'DECREASE' })}>-</button>
        </React.Fragment>
    );
}