react/redux 应用程序：未调度到存储的操作

Question

我正在使用 redux 创建一个用于状态管理的 react 应用程序，我在尝试调度和操作时遇到问题，操作在 redux devtools 中显示，但它没有将数据存储到 redux 存储，不确定为什么会发生，非常不寻常

如果有人知道为什么会这样，请告诉我

我的组件在下面

import axios from "axios";
import React, { Component } from "react";
import { connect } from "react-redux";
import { SETDATA } from "./store";

class Hello extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.firstdispatch();
  }

  firstdispatch = () => {
    axios.get("https://jsonplaceholder.typicode.com/users").then((r) => {
      console.log("data fetched", r.data);
      this.props.setdata(r.data);
    });
  };

  render() {
    return (
      <div>
        {" "}
        fff
        {/* <button onClick={this.props.setdata}>getdata</button>
        <button onClick={this.props.removedata}>decriment</button> */}
        {/* <button onClick={props.push}>push</button>
      <button onClick={props.pop}>pop</button> */}
        {console.log(this.props)}
        {this.props.users &&
          this.props.users.map((m, i) => (
            <div key={i}>
              {m.title} {` - - - -`} {m.email}
            </div>
          ))}
      </div>
    );
  }
}

const mapstatetoprops = (state) => {
  return {
    users: state.users.users || [],
  };
};
const mapDispatchTopProps = (dispatch) => {
  return {
    setdata: (users) => {
      dispatch({ type: SETDATA, users });
    },
  };
};

export default connect(mapstatetoprops, mapDispatchTopProps)(Hello);

---

Actions reducers 和 store 在下面 更新了

---

import * as redux from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

export const SETDATA = "users";
export const DELETEDATA = "data/deletedata";

const initSst = {
  users: [],
};

const users = (state = initSst, action) => {
  switch (action.type) {
    case SETDATA:
      return { ...state, ...action.data };
    case DELETEDATA:
      return { data: null };
    default:
      return state;
  }
};
const rootReducer = redux.combineReducers({
  users,
});

const store = redux.createStore(
  rootReducer,
  composeWithDevTools(
    redux.applyMiddleware(thunk)
    // other store enhancers if any
  )
);

export default store;

Answer 1

一旦我将初始状态更新为空数组它的工作

redux、动作、存储

import * as redux from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

export const SETDATA = "users";
export const DELETEDATA = "data/deletedata";

const users = (state = [], action) => {
  switch (action.type) {
    case SETDATA:
      return [...action.payload];
    default:
      return state;
  }
};
const rootReducer = redux.combineReducers({
  users: users,
});

const store = redux.createStore(
  rootReducer,
  composeWithDevTools(
    redux.applyMiddleware(thunk)
    // other store enhancers if any
  )
);

export default store;

组件

import axios from "axios";
import React, { Component } from "react";
import { connect } from "react-redux";
import { SETDATA } from "./store";

class Hello extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.firstdispatch();
  }

  firstdispatch = async () => {
    await axios.get("https://jsonplaceholder.typicode.com/users").then((r) => {
      // console.log("data fetched", r.data);
      this.props.setdata(r.data);
    });
  };

  render() {
    return (
      <div>
        fff {console.log(this.props.users, "fff")}
        {(this.props.users || []).map((m, i) => (
          <div key={i}>
            {m.title} {m.email}
          </div>
        ))}
      </div>
    );
  }
}

const mapstatetoprops = (state) => {
  return {
    users: state.users,
  };
};
const mapDispatchTopProps = (dispatch) => {
  return {
    setdata: (users) => {
      dispatch({ type: SETDATA, payload: users });
    },
  };
};

export default connect(mapstatetoprops, mapDispatchTopProps)(Hello);

Answer 2

只需将switch/case 中的"SETDATA" 更新为SETDATA

case SETDATA:
  return { ...state, ...action.data };