web前端全系列 教程
1839个小节阅读:2243.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
针对已经存在的React项目,我们要使用Redux,需要进行手动的一些安装或者配置。
安装@reduxjs/toolkit
react-redux
xxxxxxxxxx
npm install @reduxjs/toolkit react-redux
创建Store
创建app/store.js文件
xxxxxxxxxx
import {configureStore} from '@reduxjs/toolkit'
import userReducer from '../slices/userSlice'
//创建store
export default configureStore({
//传入reducer
reducer:{
user:userReducer
}
})
至少有一个reducer
创建slices/userSlice.js文件
xxxxxxxxxx
import { createSlice } from '@reduxjs/toolkit'
//定义初始state
const initialState = { list: [] }
//创建slice
const slice=createSlice({
//定义域名称
name: 'user',
//传入初始state
initialState,
//定义reducers
reducers: {
addUser: (state, action) => {
state.list.push(action.payload)
}
}
})
//导出action creator
export const {addUser} =slice.actions
//导出reducer
export default slice.reducer
使用Provider传递Store
xxxxxxxxxx
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import store from './app/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 传递store */}
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
实时效果反馈
1. ___负责关联redux 跟 react:
A @reduxjs/toolkit
B react-redux
C redux
D react
答案
1=>B