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

【问题标题】：Either not changing state or not rerendering redux要么不改变状态，要么不重新渲染 redux
【发布时间】：2019-02-13 19:55:19
【问题描述】：

我正在向reducer 发送一个动作来改变那个状态，但是没有任何东西重新渲染。下面是一些代码，但是由于项目很小，我在Github here上包含了一个指向repo的链接

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);

【问题讨论】：

标签： reactjs redux state dispatch rerender

【解决方案1】：

由于您没有在此处共享所有相关代码，因此大多数人不会检查您的存储库。以后尽量在这里分享相关的（只是相关的代码）。如果这样做，您将获得更快更好的答案。

我会先分享你是如何解决你的问题的。

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

所以：

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

你正在改变你在todo reducer 中的状态。不要改变你的状态。

更改相关部分：

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

祝你好运。

【讨论】：