Реагировать Redux состояние теряется при обновлении страницы

Question

в моем приложении реакции у меня есть 3 компонента. из 1-го компонента кнопкой, я использую ссылку, чтобы перейти ко 2-му компоненту. на втором я создаю состояние (избыточное хранилище), манипулирую им, и когда манипуляция заканчивается, отправив кнопку, я перенаправляю на третий компонент. в 3-м компоненте я также вижу состояние (с помощью инструмента Chrome RedEx), но здесь, когда я обновляю страницу (веб-пакет при изменении и сохранении кода), я теряю состояние и получаю пустой объект.

это структура моего приложения.

index.js

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

const App = ({ location }) => (
  <Container>
    <Route location={location} path="/" exact component={HomePage} />
    <Route location={location} path="/GameInit" exact component={GameInit} />
    <Route location={location} path="/Battle" exact component={Battle} />
  </Container>
);

App.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default App;

Здесь, на HomePage, у меня есть кнопка, которая ссылается на GameInit

const HomePage = () => (<Button color="blue" as={Link} to="/GameInit">START GAME</Button>);
export default HomePage;

и страница GameInit выглядит как

class GameInit extends Component {
  componentWillMount() {
    const { createNewPlayer} = this.props;
    createNewPlayer();
  }
/* state manipulation till it gets valid */
 palyerIsReady()=>{ history.push("/Battle");}

export default connect(mapStateToProps,{ createNewPlayer})(GameInit);

и, наконец, боевой компонент, где я впервые вижу состояние, но проигрываю при обновлении

class Battle extends Component {
  render() {return (/*some stuff*/);}}

Battle.propTypes = {
  players: PropTypes.object.isRequired // eslint-disable-line
};
const mapStateToProps = state => ({
  players: state.players
});
export default connect(mapStateToProps,null)(Battle);

Answer 1

Вы можете легко сохранить его в местном хранилище. Проверьте пример ниже.

const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if(serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (e) {
    return undefined;
  }
};

const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (e) {
    // Ignore write errors;
  }
};

const peristedState = loadState();

store.subscribe(() => {
  saveState(store.getState());
});

const store = createStore(
  // Other reducer
  persistedState,
);

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root');
);

---

Сериализация - дорогостоящая операция. Вы должны использовать функцию газа (например, реализованную в lodash), чтобы ограничить количество сохранений.

Например:

import throttle from 'lodash/throttle';

store.subscribe(throttle(() => {
  saveState(store.getState());
}, 1000));

Answer 2

Мой личный совет для горячей перезагрузки заключается в следующем: Реагирует на горячий загрузчик , это предотвращает перезагрузку страницы и отключает только измененный фрагмент. Это подразумевает, что ваше состояние никогда не теряется при разработке.

Это довольно легко установить. Вам нужно только добавить запись и обернуть исходный компонент в hot, который вы можете получить из пакета.

Если вам нужна дополнительная информация о том, как это работает, я предлагаю посмотреть этот доклад создателя.

Answer 3

Вы можете использовать что-то вроде redux-persist , чтобы сохранить состояние избыточности в local storage или в другую систему хранения.