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>
	
	)

}