Redux - 状态正在更新，但 React 组件没有

Posted 2023-03-10

【中文标题】Redux - 状态正在更新，但 React 组件没有

【英文标题】：Redux - State is updating but React components are not

【发布时间】：2019-03-10 14:54:44

【问题描述】：

Redux/React-Redux 没有通过 mapStateToProps 将状态返回给组件，尽管 reducer 正确触发并组装了正确的状态。我遵循了 Redux 代码，状态似乎流过，但尽管已将其包装在 connect 函数中，但它并没有返回到 React 组件。

以下代码摘录：

index.js（我的应用）

import  Provider, connect  from 'react-redux';
import  store  from './store/index';
import  fetchData, ghostFlag, dropDowned, addAttribute, setSelectedItem  from './actions/docActions';

    ...some code...

    render()

      return(

        <span className = "app-container" id = this.props.sidebar_shown>

          <div className="sidebar" >

    <div className = "add_content_1"> 
                <h2 className="page-add-subheader">Content</h2>
                <TextAddContainer BlogSnapshot = this.props.getSnapshot CurrentEditPageHandle = this.props.CurrentEditPageHandle />
                <SidebarImageContainer CurrentEditPageHandle = this.props.CurrentEditPageHandle  />
              </div>



const mapStateToProps = (state, ownProps)  => 
  console.log("The state is:"+state);
  return state;


const mapDispatchToProps = dispatch => 
  return 
    fetchData: () => dispatch(fetchData (typeVar, snapshot)),

    updateHandle: () => dispatch(updateHandle(handle)),

  


ReactDOM.render(
  <Provider store = store>
  <App />
  </Provider>,

    document.getElementById('root')
);

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

商店：

import React from 'react';
import applyMiddleware, createStore, combineReducers  from 'redux';
import rootReducer from '../reducers/reducers';

export const store = createStore(
    combineReducers(
        state: rootReducer
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

import undoable,  distinctState  from 'redux-undo';

Reducers（确认在 devtools 中工作，但返回的状态没有到达我的组件！）：

export const rootReducer = ( state , action) => 

    if(typeof(state) === "undefined")
        state = 0;
    

    switch (action.type)
        case 'SELECTED':
            return Object.assign(, state, 

            )

        case 'DROPDOWN':
            return Object.assign(, state, 

            )
        case 'PAGESNAP':
            if(action.payload)
                return Object.assign(, state, 
                    PagesSnapshot : action.payload  
                )              
            else  return state

        case 'BLOGSNAP':
            if(action.payload)
                return Object.assign(, state, 
                    BlogSnapshot : action.payload   
                )              
            else  return state
        case 'IMAGESNAP':
            if(action.payload)
                return Object.assign(, state, 
                    ImageSnapshot : action.payload  
                )              
            else  return state
        case 'CURRENTEDITPAGE':
            return Object.assign( , state, 
                CurrentEditPageHandle : action.payload
            )

        default:
            return state
    

如您所见，我已经相应地映射了连接函数。这是怎么回事？

【参考方案1】：

存在主要问题是因为您在导出它的同一个文件中引用了<App />。在它被渲染的时候，你还没有真正将你的应用程序连接到你的商店。您需要 <App /> 本质上是连接版本 (export default connect(mapStateToProps, mapDispatchToProps)(App);)。

解决此问题的最简单方法是将课程移至App.js 并如下调用：

App.js：

class App 
    render() 
       ...
    


const mapStateToProps = (state, ownProps)  => 
  console.log("The state is:"+state);
  return state;


const mapDispatchToProps = dispatch => 
  return 
    fetchData: () => dispatch(fetchData (typeVar, snapshot)),

    updateHandle: () => dispatch(updateHandle(handle)),

  


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

index.js：

import App from './app'
...Setup store...

ReactDOM.render(
 <Provider store = store>
    <App />
 </Provider>,

 document.getElementById('root')
);

【讨论】：

嗯...这是很好的建议，但似乎并没有解决问题。正如您提到的，我已经对其进行了重构，并在 index.js 文件中设置了存储，但更新后的状态似乎仍未到达应用程序，尽管控制台确认状态已更新。只是为了确定——我应该能够从 App 组件中以 props 的形式访问状态，对吧？因此名称为“mapStateToProps”？

@camelCaseCowboy 你能创建一个codesandbox 来展示你的问题吗？

@camelCaseCowboy 你确定你正在渲染从connect() 返回的组件，而不是ReactDOM.render() 中的<App/> 组件吗？

我在这里做了一个示例代码框：codesandbox.io/s/w0xlllq62k。要回答您的问题 vhflat- 我已将导出的 App React 组件包装在连接函数中，现在将其导入 index.js，其中包含根据 FrankerZ 的说明的 ReactDOM 方法。您指的是“提供者”组件吗？因为我确保将应用程序包装在索引文件中...

OP 也有一个 store 问题（他完全创建了另一个 store，并在他的 dispatch 函数中使用它），所以更新没有被转换为 prop 更改，因为他更新了错误的 redux商店。