react中redux怎么使用

function reducer( state={age:10,name:'lisa' },actions{ switch(action.type{ case "add": return {...state, age:state.age+1 }; case "reduce": return { age:state.age-1 } default: return state } }

# NPM npm install redux # Yarn yarn add redux

//创建仓库 import {createStore} from 'redux' // createStore=>创建仓库 //语法 //let store = createStore(reducer,中间件 // reducer => 自己定义 // 1他是一个函数 // 2参数1 仓库中的数据 参数2 行为 actions // 3这个reduer 返回值 就是最新的仓库中的数据 // 4redcuer =》就是在reducer中定义方法修改数据 =》vuex mutations function reducer(state={age:10},actions{ switch(actions.type{ case "add": console.log('add',state; return {age:state.age+1}; default : return state } } let store = createStore(reducer /** * * @@observable: ƒ observable( 观察仓库中的数据 dispatch: ƒ dispatch(action =》触发reducer getState: ƒ getState( =>获取到仓库中的数据 replaceReducer: ƒ replaceReducer(nextReducer 替换reducer subscribe: ƒ subscribe(listener 订阅 * * * * **/ export default store

import logo from './logo.svg'; import './App.css'; // 在组件中引入仓库 import store from './store/index' import {useState} from 'react' function App( { // 1获取到仓库中的数据 // console.log(store.getState(; // let age = store.getState(.age let [age,setAge] = useState(store.getState(.age const changeAge = (=>{ //触发 reducer store.dispatch({type:'add'} // 问题=》仓库中的数据更新了=》但是视图没有更新 =》组件没有更新 // 1 讲这个数据=》动态数据 // setAge(仓库中的最新数据 =>和仓库进行关联 setAge(store.getState(.age } return ( <div className="App"> <h2>我的年龄{age}</h2> <button onClick={(=>changeAge(}>修改仓库选中数据</button> </div> ; } export default App;

// 合拼reducer import {combineReducers} from 'redux' // combineReducers import CartReducer from './CartReducer' import meReducer from './meReducer' //作用：合拼reducer //语法： let reducers = combineReducers({属性：各自的reducer,属性：各自的reducer} let reducers = combineReducers({ CartReducer, meReducer } export default reducers

/* combineReducer 作用： 合并 reducer 数据实现模块化 语法：let reducers=combineReducers({属性:各自的reducer, 属性:各自的reducer} */ // 工程化处理Reducer 合拼 import { combineReducers } from "redux"; // combineReducers import CartReducer from "./CartReducer"; import MeReducer from "./MeReducer"; // 在这里引入各自的reducer // 处理方法 =》 自动引入reducer 自动合拼reducer // 1 在reducers文件夹下创建一个 reducer 文件 =》 再给我 合拼成reducer // 1 webpack =》 require.context =》自动获取到文件中的暴露内容 // 语法：require.context('文件路径'，布尔值，正则 // requeire.context('文件路径'，布尔值，正则 => 返回值 （是webpack）实例方式 // 两个方法 1. webf.keys(=>['文件路径'，布尔值，正则] // 2.获取到它的内容 webf(路径.default let webf = require.context("./", true, /\.js/; let webfList = webf.keys(; // console.log(webfList; // 删除自身 index.js let index=webfList.findIndex((item,index=>{ return item=='./index.js' } webfList.splice(index,1 // console.log(webfList; // 将webfList合并成一个对象 let objs={}; webfList.forEach((item,index=>{// 文件路径 ./ CartReducer .js // console.log(webf(item.default; // 处理属性 = item let items=item.replace('./',''.replace('.js','' // console.log(items objs[items]=webf(item.default } // console.log(objs // 作用：合并reducer // 语法：let reducers=combineReducers({属性：各自的reducer,属性：各自的reducer} let reducers = combineReducers(objs; export default reducers;

/* 五：bindActionCreators bindActionCreators => 自动触发reducer => 你想要触发 语法：let 对象 =bindActionCreators({属性：属性值是一个方法},dispatch 属性值是一个方法=》 就是你的reducers中的方法 使用： 1 实现reducer 和他的行为一一对应 2 使用 bindActionCreators 来实现 2.1 语法 bindActionsCreators({就是你的reducer 和 使用的行为对应},dispatch 全部触发我的模板中的reducer 行为 1 我的模块reducer 有多少个行为 2 我的模块中add */ import { bindActionCreators } from "redux"; import store from "../index"; // bindActionCreators => 自动触发reducer => 你想要触发 // 语法 let对象 =bindActionCreators({属性：属性值是一个方法}，dispatch，属性值是一个方法 =》就是你的reducer中的方法 // 创建方法 let meAdd = ( => { return { // 行为 =》 actions type: "add", }; }; let meSub = ( => { return { type: "sub", }; }; let meActions = bindActionCreators({ meAdd, meSub }, store.dispatch; export default meActions;

import logo from './logo.svg'; import './App.css'; //来到组件 import store from './store/index' import {useState} from 'react' //使用 自动派发 import meActions from './store/actions/meActions' function App( { // 1获取到仓库中的数据 console.log(store.getState(; // let age = store.getState(.meReducer.age let [age,setAge] = useState(store.getState(.meReducer.age // 3引入我们这个自动派发的方法 =》直接使用 const changeAge = (=>{ console.log( meActions; // store.dispatch({type:'add'} //触发reducer meActions.meAdd( setAge(store.getState(.meReducer.age } return ( <div className="App"> <h2>我的年龄{age}</h2> <button onClick={(=>changeAge(}>修改仓库选中数据</button> </div> ; } export default App;

npm install react-redux

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { Provider } from 'react-redux'; import store from './store'; const root = ReactDOM.createRoot(document.getElementById('root'; root.render( <Provider store={store}> {/* 在父组件中提供数据 */} <App /> </Provider> ;

/* react-redux 作用 提供 1 组件 =》 在子级组件提供仓库组件，在自己组件中获取到仓库数据 2 hooks useSelector => 得到仓库中的数据 // 语法 useDispatch 作用：可以获取到更新组件的dispatch；触发 reducer =》 语法 useDispatch( => dispatch( */ // 使用 // 在自己组件中获取到仓库中的数据 =》 使用它提供的两个hooks import {useSelector,useDispatch} from 'react-redux' // useSelector(state=>{返回值} =》返回值 得到仓库中的数据 // useDispatch 触发redcuer =》 语法 useDispatch(=> 的返回值就是 dispatch( // 作用：获取到可以更新组件的dispatch function App({ let age=useSelector(state=>{ // state是来自父组件的store数据 return state.MeReducer.age } let dispatch=useDispatch( // 1 先触发reducer，获取到仓库中的数据，再通过useState修改数据方法，让数据更新 console.log(age,'组件重新创建'; return( <div> <h2>我的年龄{age}</h2> <button onClick={(=>{dispatch({type:'add'}}}>修改仓库</button> </div> } export default App /* 总结：react-redux 作用：让仓库和react项目进行关联 它为react项目提供了一个组件（Provider），两个hooks（useSelector、useDispatch） Provider: 在父级组件中提供数据，其他的自己组件就可以获取到 useSelector：在组件获取到仓库中的数据 useDispatch：先触发reducer，获取到仓库中的数据，再通过useState修改数据，让数据更新 */

//我的模块中 异步处理 import axios from 'axios' import store from '../index' // 定义异步处理方法 //根据actions作用来进行定义 =》1 获取到异步数据 2 触发reducer //定义异步处理方法 // 1 是一个方法 // 2 获取到异步数据 // 3 触发reducer => store export function getAgeSub({ //1获取到异步数据 function getData({ return axios.get(''.then(res=>{ //后端给的数据 let a = 100 return a } } // 2触发reducer return async(=>{ // 1获取到异步数据 let data = await getData( console.log(data; // 2 触发reducer =>将异步数据传递给 reducer console.log('触发reducer'; store.dispatch({type:'add',data } } } // getAgeSub( //总结 定义actions //1 获取到异步数据 //2 触发reducer //3 知道执行的获取到异步数据，再 执行reducer //定义异步actions => 函数劫持 //高阶函数=》 1 这个函数的参数是一个函数 或者 这个函数的返回值是一个函数 // 函数劫持 =》我在处理某个逻辑之前，要做一些操作，我们把这个方法叫做函数劫持

npm install redux-thunk

// 引入中间件
import {createStore,applyMiddleware} from 'redux'
import reducers from './reducers'
// 引入'redux-thunk'
import ReduxThunk from 'redux-thunk'



let store = createStore(reducers,applyMiddleware(ReduxThunk
  //applyMiddleware(ReduxThunk =>1处理组件中 dispatch（）这个方法内容可以写 方法 
  // 2 异步actions 返回的处理方法 的第一次参数就是dispatch


export default store

export function getAgeReduce({ //1获取到异步数据 function getData({ return axios.get(''.then(res=>{ //后端给的数据 let a = 100 return a } } // 2触发reducer return async(dispatch=>{ //第一个参数 就是 dispatch // 1获取到异步数据 let data = await getData( console.log(data; // 2 触发reducer =>将异步数据传递给 reducer console.log('触发reducer'; dispatch({type:'reduce',data } } }