Question

我正在向还原器发送操作以更改该状态，但是什么都没有重新发送。以下是一些代码，但是由于该项目很小，我在Github here

上包含了指向该仓库的链接

import React, {Component} from 'react';

import {connect} from 'react-redux';

import * as action from '../action';

import {addTodo} from "../action";

//this is used to get the text from the input to create a new task
let text = "";

class AddTodo extends Component
{
    render()
    {
        return(
            <div>
                <input type="text"  id="taskText" onChange={ () => { text = document.querySelector("#taskText").value;}   }/>
                <button onClick={this.props.addTodo}>+</button>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) =>
{
  return (
      {
          addTodo: () =>
          {
              //console.log(`making action with text: ${text}`);
              addTodo.payload = {text:text, completed:false};
              dispatch(addTodo);
          }
      }
  );
};

export default connect(null, mapDispatchToProps)(AddTodo);

Answer 1

由于您尚未在此处共享所有相关代码，因此大多数人不会检查您的存储库。将来，请尝试在此处共享相关代码（仅相关代码）。如果这样做，您将获得更快更好的答案。

我将分享您如何首先解决问题。

TodoList

取消注释App.js组件。
在TodoList组件中，您使用的状态错误。您在todo减速器中的待办事项。

所以：

taskList: state.list.tasks.todo.concat( state.list.tasks.completed ),

您正在todo减速器中更改状态。不要改变你的状态。

更改相关部分：

case "ADD_TODO":
    return { ...state, tasks: { ...state.tasks, todo: [ ...state.tasks.todo, action.payload ] } };

除了这些问题之外，您还使用了一些不良做法。例如，为什么将text保留在AddTodo组件中那样的变量中？在这里使用本地状态，这是正确的React方法。

此外，动作创建者的定义也不正确。它们是函数，返回一个对象。现在，您的AddTodo组件将如下所示：

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../action";


class AddTodo extends Component {
  state = {
    text: "",
  }

  handleChange = e => this.setState( { text: e.target.value } );
  handleSubmit = () => {
    const newTodo = { text: this.state.text, completed: false };
    this.props.addTodo( newTodo );
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <button onClick={this.handleSubmit}>+</button>
      </div>
    );
  }
}

const mapDispatchToProps =
  {
    addTodo: actions.addTodo,
  };

export default connect( null, mapDispatchToProps )( AddTodo );

或者，即使您愿意，这里也不需要单独的mapDispatchToProps。您可以像这样使用连接部分：

export default connect( null, { addTodo: actions.addTodo } )( AddTodo );

然后，您相关的动作创建者将是这样的：

export const addTodo = newTodo => ({
  type: "ADD_TODO",
  payload: newTodo
});

所以，我建议阅读更多有关Redux的好教程：）给自己一点时间。遵循一些良好的教程，直到您确定知道最佳实践和正确的方法。例如，如果您学习Redux，第一个规则就是不改变您的状态。您到处都在做它:)另外，请尝试保持状态简单，而不是嵌套状态。

祝你好运。

不更改状态或不重新呈现Redux

1 个答案: