state 在 react redux 中获得不同的值

Question

标题可能具有误导性，但实际情况如下：
reducer.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")
);

returns 中 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); returns:

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}

案例“NEW_NOTE”： console.log("州", 州); {...状态，注释：state.notes.concat(action.data)}

state 在 react redux 中获得不同的值

state gets different values in react redux

reactjs

redux

react-redux