Question

我正在研究react-redux。首先，addTodo的动作如下所示。

let nextTodoId = 0;

export const addTodo = (content) => ({
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content
  }
});

组件在这里

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";

function AddTodoComponent(props) {
  const [inputValue, setInput] = useState("");
  console.log({ addTodo })

  const handleAddTodo = () => {
    console.log(inputValue)
    props.addTodo(inputValue);
    setInput("");
  };

  return (
    <div>
      <input onChange={(e) => setInput(e.target.value)} />
      <button className="add-todo" onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );
}

export default connect(null, { addTodo })(AddTodoComponent);

我想使用mapStateToProps和mapDispatchToProps，但是它不起作用。我以为如果使用销毁对象就可以了。但是它也不会出现在控制台中。我错了吗？

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";

function AddTodo({
  allId,
  byId,
  newTodo,
}) {
  const [inputValue, setInput] = useState("");

  const handleAddTodo = () => {
    newTodo(inputValue);
    setInput("");
  };

  return (
    <div>
      <input onChange={(e) => setInput(e.target.value)} />
      <button className="add-todo" onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    allId: state.allId,
    byId: state.byId,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    newTodo: () => dispatch(addTodo()),
  }
}

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

这是减速器功能。

import { ADD_TODO, TOGGLE_TODO } from "../actionTypes";

const initialState = {
  allIds: [],
  byIds: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      const { id, content } = action.payload;
      return {
        ...state,
        allIds: [...state.allIds, id],
        byIds: {
          ...state.byIds,
          [id]: {
            content,
            completed: false
          }
        }
      };
    }
    case TOGGLE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: {
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed
          }
        }
      };
    }
    default:
      return state;
  }
}

Answer 1

我花了一些时间玩，但我发现了您的问题！（实际上是3个问题）。

您的addTodo函数是获取Todo（string）内容并创建动作的函数。

const mapDispatchToProps = (dispatch) => {
  return {
    newTodo: () => dispatch(addTodo())
  };
};

但是在您的mapDispatchToProps函数中，您不接受任何参数，并调用不包含任何参数的addTodo。因此，您的待办事项已添加，但是content将始终为undefined。

将此更改为

newTodo: (content) => dispatch(addTodo(content))

在mapStateToProps中，您有一个错误命名的属性。您需要将state.byId更改为state.byIds。
为了清除input的内容，您需要input来控制useState的值。将value={inputValue}添加到输入元素。

<input value={inputValue} onChange={(e) => setInput(e.target.value)} />

这是一个旁注，但您可能要考虑学习打字稿并为项目添加批注。有一些学习曲线，但要权衡的是，您将能够轻松捕获遗失参数和错误命名属性等情况。否则，它们可能是真正的抓头人。

为什么我的方法不起作用？ react-redux

1 个答案: