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

Posted 2023-02-22

【中文标题】react/redux 应用程序：未调度到存储的操作

【英文标题】：react/ redux app : actions not dispatching to store

【发布时间】：2021-10-17 21:41:42

【问题描述】：

我正在使用 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;

【参考方案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);

【参考方案2】：

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

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

【讨论】：

更新 mapStateToProps：users: state.users || [],

TypeError: this.props.users.map is not a function 这个错误在我删除时显示我认为第一个用户是reducer名称，其他用户是数组-在redux开发工具中用户也是空数组