标签: redux

index.js

src 目录下 index.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import Vote from './views/Vote'
import store from './store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <ConfigProvider locale={zhCN}>
        <Provider store={store}>
            <Vote></Vote>
        </Provider>
    </ConfigProvider>
)

罗天旭大约 2 分钟

redux Toolkit

基础流程

src 目录下创建 store 文件夹,store 目录下创建 index.js

import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './features/counterSlice.ts'

// configureStore创建一个redux数据
const store = configureStore({
    // 合并多个Slice
    reducer: {
        counter: counterSlice,
    },
})

export default store

罗天旭大约 3 分钟

redux

基础

index.js

在 Src 目录下新建 store 文件夹 /src/store/index.js

import { createStore } from 'redux'

let initial = {
    supNum: 10,
    oppNum: 5,
}
const reducer = function reducer(state = initial, action) {
    // 浅拷贝，不直接修改容器中的状态,而是在return 时再修改
    state = { ...state }
    switch (action.type) {
        case 'VOTE_SUP':
            state.supNum++
            break
        case 'VOTE_OPP':
            state.oppNum++
            break
        default:
            break
    }
    return state
}
const store = createStore(reducer)

export default store

罗天旭大约 3 分钟