react（9）-redux

使用CRA快速创建react项目 

npx create-react-app react-redux

安装配套工具

npm i @reduxjs/toolkit react-redux

启动项目

在创建项目时候会出现一个问题 

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:

解决办法

 卸载全局安装的create-react-app

npm uninstall -g create-react-app
npx clear-npx-cache
npm i create-react-app
npx create-react-app@latest xxxxx项目名

案例：

创建store文件夹

使用store数据和方法的基本步骤

1、引入import { createSlice } from "@reduxjs/toolkit";

初始化值

  //初始化state

  initialState: {count: 0},

创建使用方法

  // 修改状态的方法 同步方法 支持直接修改reducers: {increment: state => {state.count += 1;},decrement: state => {state.count -= 1;}}

解构导出

// 导出actions和reducers
const { increment, decrement } = counterStore.actions;
const  reducer  = counterStore.reducer;
// 按需导出
export { increment, decrement }; 
// 默认导出
export default reducer;

整体

import { createSlice } from "@reduxjs/toolkit";const counterStore = createSlice({name: "counter",//初始化stateinitialState: {count: 0,},// 修改状态的方法 同步方法 支持直接修改reducers: {increment: (state) => {state.count += 1;},decrement: (state) => {state.count -= 1;},},
});
// 结构counterStore// 导出actions和reducers
const { increment, decrement } = counterStore.actions;
const reducer = counterStore.reducer;
// 按需导出
export { increment, decrement };
// 默认导出
export default reducer;

2、在index文件中使用

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

3、index文件中添加 Provider

import { Provider } from 'react-redux';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);

4、APP.js文件

import { useDispatch,useSelector } from "react-redux";
import { decrement,increment } from "./store/modules/counterStore";function App() {const {count}= useSelector(state=>state.counter)const dispatch= useDispatch()return (<div className="App"><button onClick={()=>dispatch(decrement())}>-</button>{count}<button onClick={()=>dispatch(increment())}>+</button></div>);
}export default App;

5 传参的写法  

 addToNum(state, action) {state.count += action.payload;}

不要忘记两个地方的导出

使用

 <button onClick={()=>dispatch(addToNum(20))}>+</button>

案例2  异步获取数据

channenStore.js文件

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
// 创建store数据
const channelStore = createSlice({name: "channel",initialState: {channelList: [],},// 修改状态的方法reducers: {setChanles(state, action) {state.channelList = action.payload;},},
});
// 导出actions和reducers
const { setChanles } = channelStore.actions;
const reducer = channelStore.reducer;
// 异步请求部分
const fetchChannlList = () => {return async (dispatch) => {const res = await axios.get("http://geek.itheima.net/v1_0/channels");dispatch(setChanles(res.data.data.channels));};
};
export { fetchChannlList };
export default reducer;

store的index文件 

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
import channelReducer from "./modules/channelStore";
const store=configureStore({reducer: {counter: counterReducer,channel: channelReducer}
});
export default store;

触发

import { useDispatch, useSelector } from "react-redux";
import { decrement, increment, addToNum } from "./store/modules/counterStore";
// 引入异步函数 channelStore的函数方法
import { fetchChannlList } from "./store/modules/channelStore";
import { useEffect } from "react";function App() {const { count } = useSelector((state) => state.counter);
// 获取channelListconst { channelList } = useSelector((state) => state.channel);const dispatch = useDispatch();// 触发异步函数useEffect(() => {dispatch(fetchChannlList())},[dispatch])return (<div className="App"><button onClick={() => dispatch(decrement())}>-</button>{count}<button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(addToNum(20))}>+</button>{/* 列表展示 */}<ul>{channelList.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></div>);
}export default App;