Question

我遇到Redux的问题。我创建了Reduser，它工作正常。它改变了商店，我可以在ReduxDevTools中显示它。但是在组件状态下不会更新。

我有mapStateToProps, mapDispatchToProps, connect,，它在文档中看起来都像，但它不起作用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './components/App.jsx';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import storeApp from './reducers';



let store = createStore(
    storeApp,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );



ReactDOM.render( 
    <Provider store={store}>
        <App />
    </Provider> , document.getElementById('root'));

我的 reducer ，我在combineReducers中合并;

import {FIRST_ACTION, SECOND_ACTION ,THIRD_ACTION} from '../actions/actionTypes';

const firstRedus = (state = {}, action) => {

switch (action.type) {
    case FIRST_ACTION:
        return Object.assign({}, state, {
            test: action.text
        })
    case SECOND_ACTION:
        return Object.assign({}, state, {
            test: action.text
        })
    case THIRD_ACTION:
        return Object.assign({}, state, {
            test2: action.text
        })

    default:
        return state
 }
}
 export default firstRedus

这是我的 combineReducers

    import { combineReducers } from 'redux'
    import firstRedus from './firstRedus'


    export default combineReducers({
     firstRedus
    })

我的 App.jsx组件

    import React, { PureComponent } from 'react';
    import '../css/App.css';

    import { connect } from 'react-redux'
    import { bindActionCreators } from 'redux'
    import {actFirst,actSec} from '../actions/actions.js';



    class App extends PureComponent {

        constructor(props) {
            super(props)
            this.state = {
                test: this.props.test
            }
            this.handleClick1= this.handleClick1.bind(this);
            this.handleClick2= this.handleClick2.bind(this);
        }
        handleClick1(e){
            e.preventDefault();
            this.props.actFirst('first')
        }
        handleClick2(e){
            e.preventDefault();
            this.props.actSec('scond')
        }   
        render() {
          return (
            <div className="App">
            <ul>
                <li>{this.state.test}</li> //doesn't work
                <li>{this.props.test}</li>  //doesn't work
            </ul>               
                <button onClick={this.handleClick1}>test1</button>  
                <button onClick={this.handleClick2}>test2</button>  
            </div>
          );
        }
    }

    function mapStateToProps(state){
        return {
            test: state.test        
        }
    };
    function mapDispatchToProps(dispatch,ownProps) {
        return {
            actFirst: (text) => {
                dispatch(actFirst(text));
            },
            actSec: (text) => {
                dispatch(actSec(text));
            }       
        }
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(App);

Answer 1

你可以这样改变

import React, { PureComponent } from 'react';
import '../css/App.css';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {actFirst,actSec} from '../actions/actions.js';



class App extends PureComponent {

    constructor(props) {
        super(props)
        this.state = {
            test: this.props.test
        }
        this.handleClick1= this.handleClick1.bind(this);
        this.handleClick2= this.handleClick2.bind(this);
    }
    handleClick1(e){
        e.preventDefault();
        this.props.dispatch(actFirst('first'))
    }
    handleClick2(e){
        e.preventDefault();
        this.props.dispatch(actSec('scond'))
    }   
    render() {
      return (
        <div className="App">
        <ul>
            <li>{this.state.test}</li> //doesn't work
            <li>{this.props.test}</li>  //doesn't work
        </ul>               
            <button onClick={this.handleClick1}>test1</button>  
            <button onClick={this.handleClick2}>test2</button>  
        </div>
      );
    }
}

function mapStateToProps(state){
    return {
        test: state.firstRedus.test        //change your state like this
    }
};

export default connect(mapStateToProps)(App);

反应+终极版。 Connect不会更新组件的状态

1 个答案: