Question

我刚开始在反应网站上使用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>
    );
  }
}

我错过了什么吗？

Answer 1

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

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

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

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 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存储不在道具中

2 个答案: