React基础之Redux
Redux是React中最常用的集中状态管理工具，类似于vue中的Pinia或是vuex，可以独立于框架运行
需要先安装两个插件
Redux Toolkit：简写书写方式
react-redux：连接Redux与React组件的中间件
安装
npm i @reduxjs/toolkit react-redux
创建一个store目录结构index导出子模块，再创建一个modules目录，用于存放index.js的所有子模块
实例代码
项目结构
首先，在countStore.js中
import {
createSlice
} from "@reduxjs/toolkit";
const countStore=createSlice({
name: 'counter',
//初始化状态
initialState: {
count: 0
},
//编写修改数据的方法 同步方法，支持直接修改
reducers: {
increment(state) {
state.count++
},
decrement(state){
state.count--
}
}
})
//解构出来actionCreater函数
const {increment,decrement}=countStore.actions
//获取reducer
const reducer=countStore.reducer
//按需导出的方式导出actionCreater
export {increment,decrement}
//以默认导出的方式导出reducer
export default reducer
在store的导出index.js中
import { configureStore } from "@reduxjs/toolkit";
//导入子模块reducer
import counterStore from './modules/counterStore'
const store= configureStore({
reducer:{
counter:counterStore
}
})
export default store
在主入口index.js中
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App
reportWebVitals();
在需要使用redux的app.js中
import React, { useState } from 'react';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
//导入actionCreeater
import { increment,decrement } from './store/modules/counterStore';
function App() {
const{count}=useSelector(state=>state.counter)
const dispatch=useDispatch()
return (
<div>
<button onClick={()=>dispatch(decrement())}>--</button>
{count}
<button onClick={()=>dispatch(increment())}>++</button>
</div>
);
}
export default App;
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
提交action传参
首先在reducers方法中，新增一个方法，并且多一个参数，在其他地方调用这个方法的时候，传递对于的参数即可
首先，在countStore.js中
import {
createSlice
} from "@reduxjs/toolkit";
const countStore=createSlice({
name: 'counter',
//初始化状态
initialState: {
count: 0
},
//编写修改数据的方法 同步方法，支持直接修改
reducers: {
increment(state) {
state.count++
},
decrement(state){
state.count--
},
addtoNum(state,action){
state.count=action.payload
}
}
})
//解构出来actionCreater函数
const {increment,decrement,addtoNum}=countStore.actions
//获取reducer
const reducer=countStore.reducer
//按需导出的方式导出actionCreater
export {increment,decrement,addtoNum}
//以默认导出的方式导出reducer
export default reducer
在store的导出index.js中
import { configureStore } from "@reduxjs/toolkit";
//导入子模块reducer
import counterStore from './modules/counterStore'
const store= configureStore({
reducer:{
counter:counterStore
}
})
export default store
在主入口index.js中
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App
reportWebVitals();
在需要使用redux的app.js中
import React, { useState } from 'react';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
//导入actionCreeater
import { increment,decrement,addtoNum } from './store/modules/counterStore';
function App() {
const{count}=useSelector(state=>state.counter)
const dispatch=useDispatch()
return (
<div>
<button onClick={()=>dispatch(decrement())}>--</button>
{count}
<button onClick={()=>dispatch(increment())}>++</button>
<button onClick={()=>dispatch(addtoNum(10))}>addTo10</button>
<button onClick={()=>dispatch(addtoNum(20))}>addTo20</button>
</div>
);
}
export default App;
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
异步状态操作
将异步方法定义到store中，使用axios发送请求
channeStore.js为
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const channelStore=createSlice({
name:'channel',
initialState:{
channelList:[]
},
reducers:{
setChannels(state,action){
state.channelList=action.payload
}
}
})
const {setChannels}=channelStore.actions
//异步请求部分
const fetchChannelList=()=>{
return async(dispatch)=>{
const res=await axios.get('http://geek.itheima.net/v1_0/channels')
dispatch(setChannels(res.data.data.channels))
}
}
export {fetchChannelList}
const reducers=channelStore.reducer
export default reducers
store下的index.js为
import { configureStore } from "@reduxjs/toolkit";
//导入子模块reducer
import channelStore from './modules/channelStore'
const store= configureStore({
reducer:{
channel:channelStore
}
})
export default store
src下的index.js为
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App
reportWebVitals();
App.js为
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchChannelList } from './store/modules/channelStore';
function App() {
const dispatch=useDispatch()
const {channelList} =useSelector(state=>state.channel)
//使用useEffect触发异步请求
useEffect(()=>{
dispatch(fetchChannelList())
},[dispatch])
return (
<div>
<ul>
{channelList.map(item=><li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
export default App;
