在我的React应用程序中,我有3个组件。从第一个组件通过一个按钮,我使用Link去到第二个组件。在第二个组件中,我创建了一个状态(Redux存储),对其进行操作,并在提交按钮完成操作后重定向到第三个组件。在第三个组件中,我也可以看到该状态(通过Redux Chrome工具),但是当我刷新页面时(即代码更改并保存时的Webpack操作),我会失去状态并获得一个空对象。
这是我的应用程序结构。
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;
我在主页上有一个按钮,链接到GameInit
const HomePage = () => (<Button color="blue" as={Link} to="/GameInit">START GAME</Button>);
export default HomePage;
游戏初始化页面如下所示
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);