状态在反应 redux 中获得不同的值

Question

标题可能有误导性，但这是发生的事情：
减速器.js：

// initial state
const initialState = {
  notes: [
    {
      content: "reducer defines how redux store works",
      important: true,
      id: 1,
    },
    {
      content: "state of store can contain any data",
      important: false,
      id: 2,
    },
  ],
  filter: "IMPORTANT",
};

// reducer
const noteReducer = (state = initialState, action) => {
  switch (action.type) {
    case "NEW_NOTE":
      console.log("state", state);
      return state.notes.concat(action.data); 
// ...
}

const generateId = () => Math.floor(Math.random() * 1000000);

// action
export const createNote = (content) => {
  return {
    type: "NEW_NOTE",
    data: {
      content,
      important: false,
      id: generateId(),
    },
  };
};

在 index.js 中：

const reducer = combineReducers({
  notes: noteReducer,
  filter: filterReducer,
});

const store = createStore(reducer, composeWithDevTools());

//dispatch a note from index.js
//it works here
store.dispatch(
  createNote("combineReducers forms one reducer from many simple reducers")
);

在console.log("state", state); 在 reducer.js 中：

state 
{notes: Array(2), filter: 'IMPORTANT'}
filter: "IMPORTANT" // 'filter' is here
notes: (2) [{…}, {…}]
[[Prototype]]: Object //prototype is object

到这里createNote就成功了。
但是，通过以下方式创建新笔记时：

const NewNote = (props) => {
  const dispatch = useDispatch();
  const addNote = (event) => {
    event.preventDefault();
    const content = event.target.note.value;
    event.target.note.value = "";
// createNote does not work here
    dispatch(createNote(content));
  };

  return (
    <form onSubmit={addNote}>
      <input name="note" />
      <button type="submit">add</button>
    </form>
  );
};

这里的console.log("state", state); 返回：

state 
(3) [{…}, {…}, {…}]
0: {content: 'reducer defines how redux store works', important: true, id: 1}
1: {content: 'state of store can contain any data', important: false, id: 2}
2: {content: 'combineReducers forms one reducer from many simple reducers', important: false, id: 824517}
length: 3
// 'filter' is missing
[[Prototype]]: Array(0) // state prototype changed to array

其中filter从状态消失，因此创建不成功。
简而言之， store.dispatch( createNote("...") ); 工作但不dispatch(createNote(content)); .
原因似乎是noteReducer收到了不同的状态。 但在这两种情况下都没有指定filter 。
我想知道为什么会发生这种情况以及如何解决？

Answer 1

发现问题。
noteReducer 应该是：

const noteReducer = (state = initialState, action) => {
  switch (action.type) {
    case "NEW_NOTE":
      return { ...state, notes: state.notes.concat(action.data) };
//...
}

---

刚刚发现上面是一个错误的修复。 正确的是：

const noteReducer = (state = initialState.notes, action) => {

否则noteReducer也会改变过滤器。 但它应该只更改'note'部分。

Answer 2

正如我们所知，当您使用减速器时，减速器采用 2 个参数，一个用于初始统计，另一个用于操作。 任何操作都将在您需要保存旧状态的减速器中运行
通过使用的扩展运算符 {...state}

case "NEW_NOTE": console.log("state", state); {...状态，注释：state.notes.concat(action.data)}