React中使用RTK

*郑*2024-10-09 12:26

Redux使用

- [1. 引入Redux](#1. 引入Redux)
- - [2. 创建Redux State Slice](#2. 创建Redux State Slice)

1. 引入Redux

javascript 复制代码

# NPM
npm install @reduxjs/toolkit react-redux

# Yarn
yarn add @reduxjs/toolkit react-redux

2. 创建Redux State Slice

countSlice.jsx

javascript 复制代码

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

创建ReduxStore
index.jsx

javascript 复制代码

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

React中使用ReduxStore
main.jsx

javascript 复制代码

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

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

javascript 复制代码

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

}