store 目录下

store/reducer.js

import * as actionTypes from './constants'const initalState = {counter: 100,banners: [],recommends: []
}/*** 定义reducer函数：纯函数* @param 参数一：store中目前保存的state* @param 参数二：通过 dispatch 传过来的 action* @returns 返回值：此函数的返回值，会作为，store的最新的state*/
function reducer(state = initalState, action) {/*** 关于此函数的返回值，*  1、有数据进行更新的时候，返回一个新的state*  2、没有数据更新的时候，返回之前的state*/switch (action.type) {case actionTypes.ADD_NUMBER:return { ...state, counter: state.counter + action.num }case actionTypes.SUB_NUMBER:return { ...state, counter: state.counter - action.num }case actionTypes.CHANGE_BANNERS:return { ...state, banners: action.banners }case actionTypes.CHANGE_RECOMMENDS:return { ...state, recommends: action.recommends }default:return state}
}export default reducer

---

store/index.js

import { createStore, applyMiddleware } from 'redux'`redux-thunk：一个流行的Redux中间件，允许 dispatch 函数（而不仅是对象）`
import { thunk } from 'redux-thunk'import reducer from './reducer'` 默认情况下，Redux的store.dispatch(object)，只能是object，不能是function使用 redux-thunk 可以增强store，就能 store.dispatch(function)store.dispatch(function) store.dispatch一个函数，这个函数会被中间件自动执行！`
`当需要更多的中间件时，只需：applyMiddleware(thunk, xxx, xxx, xxx) 即可 `
const store = createStore(reducer, applyMiddleware(thunk))export default store

---

store/actionCreators.js(这里的方法们，是在 .jsx组件中使用的)

import * as actionTypes from './constants'
import axios from 'axios'export const addNumberAction = num => ({type: actionTypes.ADD_NUMBER,num
})export const subNumberAction = num => ({type: actionTypes.SUB_NUMBER,num
})export const changeBannersAction = banners => ({type: actionTypes.CHANGE_BANNERS,banners
})export const changeRecommendsAction = recommends => ({type: actionTypes.CHANGE_RECOMMENDS,recommends
})export const fetchHomeMultidataAction = () => {function foo(dispatch, getState) {axios.get('http://121.200.320.20:8180/home/multidata').then(res => {const banners = res.data.data.banner.listconst recommends = res.data.data.banner.list// dispatch({ type: actionTypes.CHANGE_BANNERS, banners })// dispatch({ type: actionTypes.CHANGE_RECOMMENDS, recommends })dispatch(changeBannersAction(banners))dispatch(changeRecommendsAction(recommends))})}return foo
}

---

src 下的 index.js

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'`* 步骤1 - 通过 react-redux 库的高阶组件，减少使用过程中 .jsx文件中的冗余代码* Provider ：react-redux 库的高阶组件，用于将 Redux 的 store 传递给整个 React 应用，* Provider 必须包裹根组件（如：<App />），并传入 store 作为 prop。`
import { Provider } from 'react-redux'
`2 - import 你的 store`
import store from './store'import App from './App'const root = ReactDOM.createRoot(document.getElementById('root'))root.render(<React.StrictMode>`3 - 必须传入一个store`<Provider store={store}><App /></Provider>`4 - 在具体的.jsx组件中，在子组件（如 about.jsx）中，通过 connect 函数或 useSelector 钩子连接 Redux store，无需手动导入 store。`</React.StrictMode>
)

---

category.jsx

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchHomeMultidataAction } from '../store/actionCreators'export class Category extends PureComponent {componentDidMount() {this.props.fetchHomeMultidata()}render() {return (<div><h2>Catefory Page</h2></div>)}
}const mapDispatchToProps = dispatch => ({fetchHomeMultidata() {dispatch(fetchHomeMultidataAction())}
})export default connect(null, mapDispatchToProps)(Category)

---

about.jsx 【含 connect 详解】

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { addNumberAction, subNumberAction } from '../store/actionCreators'export class About extends PureComponent {calcNumber(num, isAdd) {if (isAdd) {this.props.addNumber(num)} else {this.props.subNumber(num)}}render() {const { counter, banners, recommends } = this.propsreturn (<div><h2>about: {counter}</h2><div><button onClick={e => this.calcNumber(6, true)}>+6</button><button onClick={e => this.calcNumber(88, true)}>+88</button><button onClick={e => this.calcNumber(6, false)}>-6</button><button onClick={e => this.calcNumber(88, false)}>-88</button></div><div className="banner"><h2>轮播图数据</h2><ul>{ banners.map((item, index) => {return <li key={index}>{item.title}</li> })}</ul></div><div className='recommend'><h2>推荐数据</h2><ul>{ recommends.map((item, index) => {return <li key={index}>{item.title}</li> })}</ul></div></div>)} // end - render
} // end - class`* connect是一个函数，而且，connect的返回值，是一个高阶函数(高阶函数，接收一个组件作为参数)所以，这个 connect 是这样使用的：connect(fn1, fn2)(about)* fn1函数，会接收一个state【就是store中的state (完整的 Redux state 树)】，作用：将 Redux store 的 state 映射到组件的 props。* fn2函数，会接收一个dispatch（（就是store中的dispatch））作用：将 Redux 的 dispatch 方法映射到组件的 props。export default connect(fn1)(fn2)(About) 这样操作之后，就在 About组件中，使用 const { counter } = this.props，即可拿到store的state的counter属性了也可以调用this.props.addNumber(1)、this.props.subNumber(2)* 这个 fn1 是随便写的，一般都用 mapStateToProps* 这个 fn2 是随便写的，一般都用 mapDispatcchToProps
`
function fn1(state) {return {counter: state.counter, `说明，About组件，会使用store的state的counter属性，`` xxx: state.xxx 说明，About组件，会使用store的state的xxx属性，`` 总之，About组件，使用啥，就在这里列出来即可 `banners: state.banners,recommends: state.recommends}
}
const mapStateToProps = state => ({ counter: state.counter })function fn2(dispatch) {`这里 return 的对象的属性，也会被合并到props中 `return {addNumber(num) {dispatch(addNumberAction(num))},subNumber(num) {dispatch(subNumberAction(num))}}
}
const mapDispatcchToProps = dispatch => ({addNumber: num => dispatch(addNumberAction(num)),subNumber: num => dispatch(subNumberAction(num))
})export default connect(fn1, fn2)(About)
// export default connect(mapStateToProps, mapDispatcchToProps)(About)

connect 的工作流程

/*** connect 的工作流程* 1、订阅Store：connect 会让组件订阅 Redux store 的变化* 2、注入Props：mapStateToProps 将需要的 state 片段注入到组件的 propsmapDispatchToProps 将 action 分发函数注入到组件的 props。* 3、自动更新：当 Redux store 的 state 变化时，mapStateToProps 会重新执行，如果返回的数据变化，组件会重新渲染* 4、触发 Action：组件通过 this.props.addNumber() 等方法调用 mapDispatchToProps 返回的函数，触发 Redux action 更新全局状态*/