React-Redux не сохраняет состояние и всегда возвращает начальные значения - PullRequest
Новая
       4

React-Redux не сохраняет состояние и всегда возвращает начальные значения

1 голос
/ 23 марта 2020

в моем приложении-макете (без серверной части), написанном с помощью Gatsby, у меня есть два компонента, отображающие элементы из одного и того же списка объектов. Мои объекты являются потоками разговоров, поэтому первый компонент отображает только заголовки потоков, а второй - длинный список всех сообщений во всех потоках. Я хотел бы иметь возможность выбрать поток в первом компоненте, так что второй отображает только те разговоры, которые принадлежат этому потоку. Итак, следуя шаблону, который я уже использовал в других частях моего кода, у меня теперь есть следующее:

redurs. js

...
const activeConversation = (state = {id : -1, name: "none"}, action) => {

  switch (action.type) {
    case SET_CONVERSATION:

      //I have tried all possible variations I could think of the following

      let newstate = action.payload.state;
      state.id = newstate.id;
      state.name = newstate.name;

     //also tried to directly return action.payload.state and state
      return newstate; 
    default:
      return state
  }
}
...
const rootReducer = combineReducers({activeConversation, /*more here*/})
export default rootReducer;

мое действие определяется как: 

import {SET_CONVERSATION} from "./preferences";

export default function setConversation(state){
  return {
      type: SET_CONVERSATION,
      payload: {
        state
     }

}

}

, и я отправляю следующее: 

let [conversation, saveConversation] = React.useState("0");

const setConversation = (event) => {
    saveConversation(event.currentTarget.id);
    let selected = {
        id: conversation,
        name: toString(conversation)
    }
    props.dispatch(actionSetConversation(selected));
  }
}

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

Большое спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 23 марта 2020

попробуйте следующее - создайте копию существующего избыточного состояния - из множества доступных методов копирования вы можете использовать. 

let newState = JSON.parse(JSON.stringify(state));
newState.id = action.payload.state.id;
newState.name = action.payload.state.name;
return newState;

вы также можете использовать уничтожение объектов.

1 голос
/ 23 марта 2020

Невозможно определить, является ли поток данных правильным, но я вижу здесь код ошибки. 

switch (action.type) {
    case SET_CONVERSATION: {
      let newstate = action.payload.state;

      return {
        ...state,
        id: newstate.id,
        name: newstate.name
      }
    }

    default:
      return state
  }

Невозможно переназначить значение с помощью =, потому что Redux работает с неизменяемыми данными. Это означает, что состояние можно заменить только новым объектом, и его нельзя изменить.

Для получения дополнительной информации проверьте эту ссылку:

https://redux.js.org/introduction/three-principles

...