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

Question

Redux/React-Redux 没有通过 mapStateToProps 将状态返回给组件，尽管 reducer 正确触发并组装了正确的状态。我遵循了 Redux 代码，状态似乎流过，但是尽管将它包装在连接函数中，但没有返回到 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并像下面这样调用它:

应用程序.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')
);