反应+还原。 Connect 不更新组件的状态

Posted 2023-02-22

【中文标题】反应+还原。 Connect 不更新组件的状态

【英文标题】：React+Redux. Connect doesn't update state of component

【发布时间】：2018-10-30 22:44:42

【问题描述】：

我对 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);     

【问题讨论】：

在页面加载或handleClick1 和handleClick2 的onClick 操作期间的问题

你能展示你的 combineReducers 吗？

那是我的 combineReducers import combineReducers from 'redux' import firstRedus from './firstRedus' export default combineReducers( firstRedus )

您可以将 mapStateToProps 更改为 test: state.firstRedus.test 。您的 firstRedus 处于测试状态

React native redux map state to props not working的可能重复

【参考方案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);