Question

试图弄清楚如何将Redux存储状态从Redux中拉入我的组件。我有mapStateToProps和＆＃34; connect＆＃34;有线。但是，当我在＆＃34; App＆＃34;中单击我的按钮时组件，this.props中没有我的Redux值。

// React and Redux Const
const { Component } = React;
const { render } = ReactDOM;
const { Provider, connect } = ReactRedux;
const {createStore, combineReducers, bindActionCreators } = Redux;



function tweetReducer(state=[],action) {
    if(action.type === 'ADD_TWEET') {
        return state.concat({ id: Date.now(), tweet: action.payload})
    } else {
        return state;
    }
}

const rootReducer = combineReducers ({
    state: (state = {}) => state,
    tweets: tweetReducer
});


class App extends Component{
    buttonClicked() {
        store.dispatch({type: 'ADD_TWEET', payload: 'This is my first 
tweet!'});
        console.log(this.props)
    }
    render() {
        return (
            <div>
                <h5>Hello from App</h5>
                <button onClick={this.buttonClicked.bind(this)}>Button</button>

                <div>-------------------</div>
                <Display />
            </div>
         )
     }
}

class Display extends Component {
    render() {
        return (
            <div>
                <h3>Tweets:</h3>
                {this.props.tweets}
            </div>
        )
    }
}

function mapStateToProps(state) {
    console.log('mapping state to props')

    return {
        tweets: state.tweets
    }
}

let store = createStore(rootReducer)

render (
    <Provider store={store}>
        <App />
    </Provider>
    , document.querySelector('#app')
);
connect(mapStateToProps)(App)

console.log(store.getState());

Answer 1

看起来你有几个问题。

首先，有助于理解connect()返回一个“包裹”在“真实”组件周围的新组件。在您的示例中，您在之后调用了<App /> connect()，和您实际上并未保存并使用生成的组件按let store = createStore(rootReducer) const ConnectedApp = connect(mapStateToProps)(App); render( <Provider store={store}> <ConnectedApp /> </Provider> , document.querySelector('#app') );。你需要的是：

connect()

其次，连接组件的部分原因是它不应该直接引用存储。 mapDispatchToProps可以使用第二个参数，称为mapDispatch。如果您未提供this.props.dispatch参数，则会自动为您的组件class App extends Component{ buttonClicked(){ this.props.dispatch({type: 'ADD_TWEET', payload: 'This is my first tweet!'}); console.log(this.props) }提供。因此，您的App组件应该如下所示：

{{1}}

这应该足以让App组件从Redux接收数据并调度操作。

Answer 2

这是您应该如何继续在组件中获取商店状态。

1）创建reducers文件夹并创建一个新文件index.js

/* reducers/index.js */

import { combineReducers } from "redux";
import tweetReducer from "./tweetReducer";

const rootReducer = combineReducers({
    tweets: tweetReducer
});

export default rootReducer;

/ * reducers / tweetReducer.js * /

function tweetReducer(state=[],action) {
    switch(action.type) {
        case 'ADD_TWEET': 
            return state.concat({ id: Date.now(), tweet: action.payload});
        default:
            return state;
    }
}

/ * components / App.js * /

import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
    buttonClicked() {
        this.props.store.dispatch({type: 'ADD_TWEET', payload: 'This is my first 
tweet!'});
        console.log(this.props)
    } 
    render() {
        return (
            <div>
                <h5>Hello from App</h5>
                <button onClick={this.buttonClicked.bind(this)}>Button</button>

                <div>-------------------</div>
                <Display />
            </div>
         )
     }
}
function mapStateToProps(state) {
   console.log('mapping state to props')
   return {
     tweets: state.tweets
   }
}
export default connect(mapStateToProps)(App);

/ * components / Display.js * /

import React, { Component } from 'react';
  export default class Display extends Component {
     render() {
        return (
            <div>
               <h3>Tweets:</h3>
               {this.props.tweets}
             </div>
        )
     }
  }

/ * Main.js * /

import React, { Component } from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";

render(
    <Provider store={store}>
        <App store={store} />
    </Provider>,
    document.querySelector('#app')
);

/ * store / index.js * /

import { createStore, applyMiddleware, compose } from "redux";
import reducers from "../reducers";

const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware())
);

export { store };

组件中的Redux状态

2 个答案: