React中使用RTK

1. 引入Redux

# NPM
npm install @reduxjs/toolkit react-redux

# Yarn
yarn add @reduxjs/toolkit react-redux

2. 创建Redux State Slice

1. countSlice.jsx

import {createSlice} from '@reduxjs/toolkit'

const countSlice = createSlice({
name:"count",
iniaialState:{
value: 0
},
reducerx:{
incr(state,action){
state.value = state.value+action.payload
},
decr(state,action){
state.value = state.value - action.payload
}
}
})

export const {incr,decr} = countSlice.actions
export const {reducer:countReducer} = countSlice

3. 创建ReduxStore
   index.jsx

import {configureStore} from '@reduxjs/toolkit'
import {countReducer} from './countSlice.jsx'
export defult configureStore({
reducer: {
count: countReducer
}
})

4. React中使用ReduxStore
   main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

5. React组件中使用Redux的状态和操作

import React from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {decr,incr} from './store/countSlice'

export const App =() => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<span>{count}</span>
<buttononClick={() => dispatch(incr())} >
          add
        </button>
</div>

)

}

原文地址：https://blog.csdn.net/weixin_42202992/article/details/142657402

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！