react(51)——redux的初使用实现加法案例,store和reducer分别干了什么事,store的getState,dispatch,subscribe方法

1.安装redux依赖

  1. 终端运行cnpm add redux
    在这里插入图片描述

2.创建store.js文件和对象

//该文件专门用于暴露一个store对象,整个应用只有一个store

//从依赖中引入createStore
import { createStore } from "redux";

//引入为组件服务的reducer,作为createStore的参数
import pageReducer from "./page_reducer";

//暴露store
export default createStore(pageReducer);

3.创建reducer.js文件

//1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
//2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)

const initState = 0;
export default function pageReducer(preState = initState, action) {
	//preState = initState意思是当preState为undefined的时候,默认赋值initState
	
  //从action对象中获取:type,data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case "increment":
      return preState + data;
    case "decrement":
      return preState - data;
    default:
      return preState;
  }
}

4.组件

4.1 组件中的代码

import React, { Component } from "react";
//引入store,用于获取redux中保存状态
import store from "../redux/store";

export default class Page1 extends Component {
   componentDidMount() {
     store.subscribe(() => {
       this.setState({});
     });
   }

  //加法
  increment = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "increment", data: value * 1 });
  };

  //减法
  decrement = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "decrement", data: value * 1 });
  };

  //奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const count = store.getState();
    if (count % 2 !== 0) {
      store.dispatch({ type: "increment", data: value * 1 });
    }
  };

  //异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    setTimeout(() => {
      store.dispatch({ type: "increment", data: value * 1 });
    }, 500);
  };

  render() {
    return (
      <div>
        <h1>当前求和为:{store.getState()}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    );
  }
}

4.2 组件代码讲解

  1. store.getState()是获取store中的reducer加工后返回的数据;
  2. store.dispatch({ type: "increment", data: value * 1 });是调用store中的reducer,并传给他action参数。
  3. store.subscribe()的参数是一个回调函数,当store中的值发生改变的时候调用参数的回调函数。
  4. this.setState({});必须要调用setState方法,才能让组件重新渲染,不然的话即使store中的值改变了,组件不重新渲染也看不出效果。
  5. 为了避免每一个使用redux的组件都在component中调用store.subscribe(),可以将store.subscribe()放在index.js文件中,如下:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

store.subscribe(() => {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
});

5.实现效果

在这里插入图片描述

6.简要总结

  1. 组件将共享的数据就放在store中,不再存放在自己的state中,但是自己的state也可以有数据。
  2. 与组件直接接触的只有store。
  3. 组件中运用的store对象不是redux依赖中本来就有的,是通过依赖中的createStore方法根据reducer创建的。
  4. reducer本质上只是一个函数,参数为preState和action,返回值为preState加工后的值。
  5. 从redux依赖中import的就只有一个函数而已:import { createStore } from "redux";
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子 旭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值