进阶知识 - reac-redux ​

npm i react-redux

import { Provider } from "react-redux"; 
 import store from "../Redux/store";
 <Provider store={store}> 根组件 </Provider>

<!-- store.jsx -->
import { applyMiddleware, createStore, combineReducers, compose } from "redux";
import thunk from "redux-thunk"; //配置thunk形式
import promise from "redux-promise"; //配置promise形式
import { HomeReducer } from "./Reducers/Home";
const Reducer = combineReducers({ HomeReducer }); // reducer模块化合并，将模块化的reducer 合并成一个大Reducer
//配置 redux-devtools 可视化追踪工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// 导出Store
export default createStore(
  Reducer,
  composeEnhancers(applyMiddleware(thunk, promise))
);


<!-- /Reducers/Home.jsx -->
let data = { status: true, list: [] };
export const HomeReducer = (oldData = data, action) => {
  let newData = { ...oldData };
  switch (action.type) {
    case "show":
      newData.status = true;
      return newData;
    case "hide":
      newData.status = false;
      return newData;
    case "Newlist":
      newData.list = action.newList;
      return newData;
    case "remove":
      newData.list = [];
      return newData;
    default:
      return newData;
  }
};


<!-- action.jsx -->
import axios from "axios";
export const TextShow = () => {
  return {
    type: "show",
  };
};
export const TextHide = () => {
  return {
    type: "hide",
  };
};
// react-thunk写法
export const NewListThunk = () => {
  return (dispatch) => {
    axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E9%B9%A4%E5%A3%81&ci=239&channelId=4"
      )
      .then((res) => {
        dispatch({ type: "Newlist", newList: res.data.data.hot });
      });
  };
};
// react-promise 写法
export const NewListPromise = () => {
  return axios
    .get(
      "/api/mmdb/movie/v3/list/hot.json?ct=%E9%B9%A4%E5%A3%81&ci=239&channelId=4"
    )
    .then((res) => {
      return { type: "Newlist", newList: res.data.data.hot };
    });
};
// 清空
export const delectList = () => {
  return { type: "remove" };
};



<!-- /Redux/Home.jsx文件 -->
import { connect } from "react-redux";
import {
  TextShow,
  TextHide,
  NewListThunk,
  NewListPromise,
  delectList,
} from "../../Redux/action";
import { useEffect, useMemo } from "react";
const Home = (props) => {
  console.log(props);
  let {
    status,
    list,
    TextShow,
    TextHide,
    NewListThunk,
    NewListPromise,
    delectList,
  } = props;
  useEffect(() => {
    if (props.list.length == 0) {
      NewListThunk();
    }
  }, []);
  const newList = useMemo(() => {
    return list.map((item) => <li key={item.id}>{item.nm}</li>);
  }, [list]);
  return (
    <div>
      <div>{status && "内容"}</div>
      <button
        onClick={() => {
          TextShow();
        }}
      >
        显示文本
      </button>
      <button
        onClick={() => {
          TextHide();
        }}
      >
        隐藏文本
      </button>

      <div>
        <ul>{newList}</ul>
        <button
          onClick={() => {
            NewListThunk();
          }}
        >
          react-thunk方式获取
        </button>
        <button
          onClick={() => {
            NewListPromise();
          }}
        >
          react-promise方式获取
        </button>
        <button
          onClick={() => {
            delectList();
          }}
        >
          清空
        </button>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    ...state.HomeReducer,
  };
};
const mapDispacthToProps = {
  TextShow,
  TextHide,
  NewListThunk,
  NewListPromise,
  delectList,
};
export default connect(mapStateToProps, mapDispacthToProps)(Home);
// connect调用会返回一个函数,返回的函数需要传入一个组件，再次调用就可以将我们的组件变成高阶组件 - 容器组件
// connect需要两个参数，一个回调函数 跟 对象
// 回调函数需要内部需要return你需要传入你组件内需要的状态数据
// 对象里面定义你需要dispatch操作的方法 直接调用 无需在dispatch  connect帮您自动dispatch


<!-- /App.jsx文件 -->
import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from "react-redux";
import store from "../Redux/store";
import Home from "./home";
const App = () => {
  return (
    <Provider store={store}>
      <Home />
    </Provider>
  );
};
ReactDom.render(<App />,document.getElementById('root'))