react_demo/redux/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from '@reduxjs/toolkit';
import App from './components/app.jsx';
import { Provider } from 'react-redux';


// reducer: f1
const f1 = (state = 1, action) => {
    switch (action.type) {
        case 'add':
            return state + action.value;
        case 'sub':
            return state - action.value;
        default:
            return state;
    }
}

// reducer: f2
const f2 = (state = 'hhh', action) => {
    switch (action.type) {
        case 'concat':
            return state + action.character;
        default:
            return state;
    }
}

// 将f1和f2作为f3的子节点，数据一般保存在叶节点
const f3 = combineReducers({
    number: f1,
    string: f2,
});

// 保存整个虚拟dom树的根节点
const store = configureStore({
    reducer: f3,
})




const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // 要在组件中使用redux，必须用Provider将组件包住
    // 全局状态树是定义在Provider组件上，每次store更新完之后，会重新渲染Provider组件及其子组件
    <Provider store={store}>
        <App></App>
    </Provider>
);