react-redux react-router 商店在道具中不可用

Question

我刚开始在我的 React 站点上使用 redux。相当小。（我正在按照本教程 https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.mhkgga84t 将一些代码插入到我的 React 站点以防万一）。但是，当我在进行中并尝试访问 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'));

但我无法从 this.props 访问 store。这里应该有吧？所以我最终可以做到 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>
    );
  }
}

我错过了什么吗？

Answer 1

您似乎没有使用 connect 装饰器连接您的状态。如果我正确阅读了 tutorial，您应该包括该行（或基于您的状态结构的类似内容）：

@connect(state => ({ todos: state.todos }))

或没有装饰器语法（评论中更简洁的版本）：

AppComponent = connect(state => ({ todos: state.todos }), null)(AppComponent);
export default AppComponent;`

Answer 2

所以我注意到的第一件事似乎不对，你正在将商店传递给提供商和路由器

<Provider store={store}><Router routes={routes} history={browserHistory} store={store} /></Provider>

只有像

这样的Provider才需要的地方

<Provider store={store}><Router routes={routes} history={browserHistory} /></Provider>

然后就像 Ashley Coolman 所说的那样，您需要将组件连接到 redux。如果你的构建是为它设置的，它可以用装饰器来完成。但是，您也可以从 react-redux 导入 connect 函数。可以找到关于它的文档 here。

我连接你的组件的方式如下

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-redux react-router 商店在道具中不可用

react-redux react-router store not available in props

javascript

reactjs

react-router

redux

react-redux