React-Redux React-router Store 在 props 中不可用
react-redux react-router store not available in props
我刚刚开始在我的反应网站上使用 redux。很小。(我正在按照本教程 https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.mhkgga84t 将一些代码插入到我的反应站点以防万一)。但是当我正在进行并尝试访问this.props.store
即使我的应用程序中有<Provider store={store}>
,它也不可用。这是我的客户端和应用程序代码(我可以提供更多,只是我不知道还要添加什么):
// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import { routes } from './routes';
import { browserHistory } from 'react-router'
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import * as reducers from './reducers';
import { fromJS } from 'immutable';
let initialState = window.__INITIAL_STATE__;
Object.keys(initialState).forEach(key => {
initialState[key] = fromJS(initialState[key]);
});
const reducer = combineReducers(reducers);
const store = createStore(reducer, initialState);
console.log('store', store);
ReactDOM.render(<Provider store={store}><Router routes={routes} history={browserHistory} store={store} /></Provider>, document.getElementById('app'));
但我无法访问store
this.props
.这里应该有吧?所以我最终可以做const { todos, dispatch } = this.props;
吗?
// src/components/app.js
import React from 'react';
import { Link } from 'react-router';
import HeaderComponent from './common/header';
import ShareFooterComponent from './common/share-footer';
import FooterComponent from './common/footer';
import { bindActionCreators } from 'redux';
import * as ListingActions from '../actions/listing';
import { connect } from 'react-redux';
export default class AppComponent extends React.Component {
render() {
console.log('apps', this.props);
return (
<div>
<HeaderComponent />
{ this.props.children }
<ShareFooterComponent />
<FooterComponent />
</div>
);
}
}
我错过了什么吗?
您似乎没有将您的状态与connect
装饰器连接起来。如果我正确阅读了本教程,您应该包含该行(或基于您的状态结构的类似内容):
@connect(state => ({ todos: state.todos }))
或者没有装饰器语法(注释中更简洁的版本):
AppComponent = connect(state => ({ todos: state.todos }), null)(AppComponent);
export default AppComponent;`
因此,我注意到的第一件事似乎是您将商店传递给提供商和路由器
<Provider store={store}><Router routes={routes} history={browserHistory} store={store} /></Provider>
仅在提供程序中需要它的地方,例如
<Provider store={store}><Router routes={routes} history={browserHistory} /></Provider>
然后就像Ashley Coolman说的那样,你需要将组件连接到redux。如果您的构建已为其设置,则可以使用装饰器完成此操作。但是,您也可以从 react-redux 导入 connect
函数。可以在此处找到有关它的文档。
我将连接您的组件的方式如下
class AppComponent extends React.Component {
render() {
console.log('apps', this.props);
return (
<div>
<HeaderComponent />
{ this.props.children }
<ShareFooterComponent />
<FooterComponent />
</div>
);
}
}
function addTodo(todo) {
return { type: ADD_TODO, payload: todo }
}
function mapStateToProps(state) {
// the state is from store.getState()
// example will pass a todos prop to the connected component
// so if you want all the state in this component use the spread operator
return {
todos: state.todos
}
}
function mapDispatchToProps(dispatch) {
// bindActionCreators will wrap all the function in the passed in object
// with the dispatch function so that the actionCreators can be called
// directly; without dispatch eg this.props.addTodo(sometodo)
return bindActionCreators({ addTodo }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AppComponent )
之后,您将在组件上同时拥有addTodo
(功能)和todos
的道具。给你
this.props.todos
this.props.addTodo()
相关文章:
- react router router.HistoryLocation以<noscript>但没有完美的工作
- React Router一直给我一个警告:你不能更改<路由器路由>
- 使用react router/react router redux将特定的redux操作绑定到一个路由
- 组件未使用ReactJS和React Router进行渲染
- React Router,在params之后嵌套路由
- 如何在 React-router 中手动调用 Link
- this.props.history已被弃用(react router)
- React-Redux React-router Store 在 props 中不可用
- 使用'react-router'.browserHistory 我得到这个.props.children
- React Router:无法将props传递给activeRouteHandler
- 通过react-router v4将props传递给子组件
- React-router:将props传递给es6处理器组件
- react-router是如何通过props传递参数给其他组件的?
- 如何在react-router v1.0.0中填充这个.props.params
- 有了reactjs和react-router,我可以显示一个组件或者{this.props.children}吗?
- React Router Props Undefined
- 将this.props.children传递到react-router中的另一个文件
- 将props传递给React Router的子路由
- React Router: this.props.params在链接点击后没有更新
- 将props传递给包含多个组件的React Router