要么不改变状态，要么不重新渲染redux

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，第一条规则就是不改变你的状态。你到处都在做:)另外，尽量保持你的状态简单，不要那么嵌套。

祝好运。