项目中使用redux react-redux redux-thunk

1.先安装依赖

npm i redux react-redux redux-thunk

2.创建store文件夹

2.1 index.js

import {
  legacy_createStore as createStore,
  applyMiddleware,
  compose,
} from "redux";

import reducers from "./reducer";
import thunk from "redux-thunk";

// 对redux-devtools工具的设置
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

export default store;

2.2 reducer.js 对分割的reducer进行合并

import { combineReducers } from "redux";

import { reducer as recommendReducer } from "@/pages/discover/c-pages/recommend/store";

const reducers = combineReducers({
  recommend: recommendReducer,
});

export default reducers;

3.对创建出来的store进行使用

import { Provider } from "react-redux";
import store from "./store";

const App = memo(() => {
  return (
    <div>
      <Provider store={store}>
        <xxx />
      </Provider>
    </div>
  );
});

export default App;

4.创建每个组件独有的store文件夹

4.1 actionCreator.js 保存对个action,redux-thunk的函数也在放里面

import * as actionTypes from "./constants";
import { getTopBanners } from "@/services/recommend";
// action
const changeTopBannerAction = (banners) => ({
  type: actionTypes.CHANGE_TOP_BANNER,
  banners,
});
// redux-thunk的函数
export const getTopBannerAction = () => {
  return (dispatch) => {
    getTopBanners().then((res) => {
      dispatch(changeTopBannerAction(res.banners));
    });
  };
};

4.2 constants.js 保存action的常量

export const CHANGE_TOP_BANNER = "CHANGE_TOP_BANNER";

4.3 index.js 对reducer进行导出

4.4 reducer.js 独有的reducer

import * as actionTypes from "./constants.js";

const defaultState = {
  topBanners: [],
};

function reducer(state = defaultState, action) {
  switch (action.type) {
    case actionTypes.CHANGE_TOP_BANNER:
      return { ...state, topBanners: action.banners };

    default:
      return state;
  }
}

export default reducer;

5.在组价中进行使用

5.1 connect的使用

import React, { memo, useEffect } from "react";

import { getTopBannerAction } from "./store/actionCreators";

import { connect } from "react-redux";

const Recommend = memo((props) => {
  const { getBanner, topBanners } = props;
  useEffect(() => {
    getBanner();
  }, [getBanner]);

  return <div>Recommend: {topBanners.length}</div>;
});

const mapStateToProps = (state) => ({
  topBanners: state.recommend.topBanners,
});

const mapDispatchToProps = (dispatch) => ({
  getBanner: () => {
    dispatch(getTopBannerAction());
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(Recommend);

5.2 hooks的使用

import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getTopBannerAction } from "./store/actionCreators";

const Recommend = memo((props) => {
  // 组件和redux关联: 获取数据和进行操作
  // useSelector对state进行操作,参数二: 性能优化(浅层比较)
  const { topBanners } = useSelector(
    (state) => ({
      topBanners: state.recommend.topBanners,
    }),
    shallowEqual
  );
  const dispatch = useDispatch();

  // 发送网络请求
  useEffect(() => {
    dispatch(getTopBannerAction());
  }, [dispatch]);

  return <div>Recommend: {topBanners.length}</div>;
});

export default Recommend;