Redux Toolkit在react中的使用（RTK）

1.利用Redux Toolkit(RTK)进行数据跨组件的传输和显示数据

2.安装redux和RTK

npm i  react-redux @reduxjs/toolkit

3.index.js代码如下

import ReactDOM from 'react-dom/client';
import {Provider} from 'react-redux'
import App from './App';
import store from './redux/store';

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

root.render(
    <Provider store={store}>
    <App />
    </Provider>
)

4.slice.js代码如下

import { createSlice } from '@reduxjs/toolkit'
// 初始值
const count={num:0}
// 创建切片
const contextSlice=createSlice({
    name:'context',
    initialState:count,
    reducers:{
        add(state){
            state.num++
        },
        sub(state){
            state.num--
        },
        addincrease(state,action){
            state.num+=action.payload
        }
    }
})
// 导出
export const {add,sub,addincrease}=contextSlice.actions
// 导出
export  const  contextReducer=contextSlice.reducer

5.store.js代码如下

import { configureStore } from '@reduxjs/toolkit'
import { contextReducer } from './slice'

// 调用方法
const store = configureStore({
    reducer: { 
        context: contextReducer
     }
})

export default store

6.Context.jsx代码如下

import React,{useState} from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {add, addincrease} from '../redux/slice'

export default function Context() {

// 默认初始值为1
const [count,setCount]=useState(1)
//引入react-redux提供的方法
const {context}=useSelector(state=>state)
//引入react-redux提供的方法
const dispatch=useDispatch()
// 加一点击事件
const addheadle=()=>{
    dispatch(add())
}
// 获取input内部value值
const getvalue=e=>{
    let value=e.target.value
    setCount(+value)
}
// 增加点击事件
const increase=()=>{
    dispatch(addincrease(count))
}
  return (
    <div>
        {context.num}<br /><br />
        <button onClick={addheadle}>+1</button><br /><br />
        <input type="text"  onChange={getvalue}/><br /><br />
        <button onClick={increase}>增加</button>

    </div>
  )
}