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
    }


}

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

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

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

1 个答案: