react-redux 的基础用法

 

上图是代码的实现原理，下面是代码

一.store中的index.js文件

import { createStore, combineReducers } from "redux";
import { REDUCER1_ADD, REDUCER1_SUB } from "./reducer-type";
//第一种这种计算属性，更容捕捉错误
function reducer1(state = 0, action) {
  switch (action.type) {
    case REDUCER1_ADD:
      return state + action.payload;
    case REDUCER1_SUB:
      return state - action.payload;

    default:
      return state;
  }
}
function reducer2(state = 0, action) {
  switch (action.type) {
    case "reducer2/add":
      return state + action.state;
    case "reducer2/sub":
      return state + action.state;

    default:
      return state;
  }
}
//合并
const rootReducer = combineReducers({
  reducer1,
  reducer2,
});
const store = createStore(rootReducer);
export default store;

二.在入口文件index.js配置redux，将store挂载全局

import React from "react"; //react本身做不了任何事
import { createRoot } from "react-dom/client"; //它的相关生态有很强大的功能
import App from "./App"; //需要渲染的dom元素（可以是jsx语言）
import store from "./store";
import { Provider } from "react-redux";
const root = document.getElementById("root"); //挂载的根元素

const domroot = createRoot(root);
domroot.render(
  <Provider store={store}>
    <App />
  </Provider>
);

三.class声明组件对store的使用

主要用到了connect高阶柯里化函数对仓库的映射和组件的传值的封装

import { connect } from "react-redux/es/exports";
import { Component } from "react";
import { REDUCER1_ADD } from "./store/reducer-type";
class App extends Component {
  render() {
    return (
      <>
        <h1>App组件---{this.props.num}</h1>
        <Uncle></Uncle>
      </>
    );
  }
}
class Uncle extends Component {
  handleClick = () => {
    this.props.dispatch(REDUCER1_ADD, 1);
  };
  render() {
    console.log("子组件render");
    return (
      <>
        <h1>Uncle组件---{this.props.num}</h1>
        <button onClick={this.handleClick}>点击+1</button>
      </>
    );
  }
}
function mapProps({ reducer1 }, props) {
  return {
    num: reducer1,
    ...props,
  };
}
function mapDispatch(dispatch) {
  return {
    dispatch: (type, payload) => dispatch({ type, payload }),
  };
}
Uncle = connect(mapProps, mapDispatch)(Uncle);
App = connect(mapProps, mapDispatch)(App);
export default App;

三.函数声明的组件对store的使用

主要是使用hooks中的useSeletor 和useDispatch来完成redux的数据传递和派送事件

import { useSelector, useDispatch } from "react-redux";
import { REDUCER1_ADD, REDUCER1_SUB } from "./store/reducer-type";
export default function App() {
  return (
    <>
      <h1>app组件</h1>
      <Uncle></Uncle>
      <Father />
    </>
  );
}
function Uncle() {
  const num = useSelector(({ reducer1 }) => reducer1);
  const dispatch = useDispatch();
  function handel() {
    dispatch({
      type: REDUCER1_ADD,
      payload: 1,
    });
  }
  return (
    <>
      <h1>Uncle组件----{num}</h1>
      <button onClick={handel}>点击+1</button>
    </>
  );
}
function Father() {
  return (
    <>
      <h1>father组件</h1>
      <Son />
    </>
  );
}
function Son() {
  const num = useSelector(({ reducer1 }) => reducer1);
  const dispatch = useDispatch();
  function handel() {
    dispatch({
      type: REDUCER1_SUB,
      payload: 1,
    });
  }
  return (
    <>
      <h1>Son组件----{num}</h1>
      <button onClick={handel}>点击-1</button>
    </>
  );
}

最后结果如图