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

Question

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
    }


}

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

Answer 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')
);