Либо не меняет состояние, либо не меняет рендеринг

Question

Я отправляю действие редуктору, чтобы изменить это состояние, но ничего не происходит. Ниже приведен некоторый код, так как проект небольшой, я включаю ссылку на репозиторий на Github здесь

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, первое правило не изменяет ваше состояние. Вы делаете это везде :) Кроме того, постарайтесь, чтобы ваше состояние было простым, не таким вложенным.

Удачи.