3

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

我错过了什么吗？

4

2 回答 2

3

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

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

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

AppComponent = connect(state => ({ todos: state.todos }), null)(AppComponent);
export default AppComponent;`
于 2016-03-17T03:52:08.720 回答
2

所以我注意到的第一件事似乎不正确是您将商店传递给提供商和路由器

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

只有在提供者中才需要它的地方

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

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

我将连接您的组件的方式如下

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(function) 和todos. 给你

this.props.todos
this.props.addTodo()
于 2016-03-18T00:35:27.417 回答