第四章 react-redux，@reduxjs/toolkit依赖，学习

redux系列文章目录

第一章 简单学习redux,单个reducer

第二章 简单学习redux,多个reducer

第三章 redux和react-redux，@reduxjs/toolkit依赖结合使用

第五章 两张图告诉你redux常使用的api有哪些

前言

本章将使用react-redux，@reduxjs/toolkit依赖创建一个简单cout计数页面

准备工作

准备一个react框架的环境

npx create-react-app  react-redux-template

下载依赖

npm i react-redux @reduxjs/toolkit

启动命令

npm start

准备目录文件，
页面：src/pages/count/index.js
redux的存放：src/redux/store.js和src/redux/counterReducer.js

详情代码

store.js

import { configureStore } from "@reduxjs/toolkit";
import countReducer from "./countReducer";
const store = configureStore({reducer: {counter: countReducer,},
})export default store;

counterReducer.js

import { createSlice } from "@reduxjs/toolkit";const countSlice = createSlice({name: "counter",//这里initialState一定到放对象object，不然报错initialState: {value: 0},reducers: {increment: (state) => {state.value +=1},decrement: (state) => {state.value-=1}},
}
)
export const {increment, decrement} = countSlice.actions
export default countSlice.reducer

count/index.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../../redux/countReducer'
export default function CountPage() {const count = useSelector(state => state.counter.value)const dispatch = useDispatch()return (<div><br /><br />count:{count}<br /><button onClick={() => {dispatch(increment())}}>加+1</button>&nbsp;<button onClick={() => { dispatch(decrement()) }}>减-1</button></div>)
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import CountPage from './pages/count';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><CountPage /></Provider></React.StrictMode>
);reportWebVitals();

提示：<Provider>很重要，引入store,这样整个应用都可以使用store相关hooks拿取数据

效果