reactjs - redux reducer没有收到 Action

今天是个好日子，
今天是我第一次去redux，我跟随了一个youtube教程来设置样板设置，以将redux与react-native一起使用，显然，我遇到了一些问题，看不到自从概念以来我可能犯的错误对我来说有点模糊。

所以我创建了一个简化的动作和类型作为起点。问题是将状态连接到组件，并在组件的构造函数中触发操作后，我从该操作中获得了结果（使用控制台日志对其进行了测试），但状态未更改。

好吧，这是我的代码：

商店

import {
    createStore,
    applyMiddleware
} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './src/reducers/rootReducer';

const initialState = {};

const middleware = [thunk];

const store = createStore(rootReducer, initialState, applyMiddleware(...middleware));

export default store;

根减速器

import { combineReducers } from 'redux';
import companyReducer from './companyReducer';

export default combineReducers({
    companies: companyReducer
});

公司减速机

import { FETCH_COMPANIES } from '../actions/types';

const initialState = {
    values: []
};

export default (state = initialState, action) => {
    switch(action.type) {
        case FETCH_COMPANIES: return {
            ...state,
            values: action.payload
        };
        default: return {
            test: 'testing'
        };
    }
}

公司行动

import {
    FETCH_COMPANIES
} from './types';

export const fetchCompanies = () => dispatch =>
    dispatch({
        type: FETCH_COMPANIES,
        payload: [{
                id: 1,
                text: "CHRONUS FRANCE .A."
            },
            {
                id: 2,
                text: "two"
            },
            {
                id: 3,
                text: "three"
            },
            {
                id: 4,
                text: "four"
            },
            {
                id: 5,
                text: "five"
            },
            {
                id: 6,
                text: "six"
            },
            {
                id: 7,
                text: "seven"
            },
            {
                id: 8,
                text: "eight"
            },
            {
                id: 9,
                text: "nine"
            },
            {
                id: 10,
                text: "ten"
            },
        ]
    });

类型

export const FETCH_COMPANIES = 'FETCH_COMPANIES';

组件

//imports
import {
  connect
} from 'react-redux';
import { fetchCompanies } from '../../actions/companyActions';

//constructor
class Welcome extends Component {
  constructor(props) {
    super(props);
    props.fetchCompanies();
    console.log(props);
  }
}

//map to props and connect
const mapStateToProps = (state) => ({
  companies: state.companies
});

export default connect(mapStateToProps, { fetchCompanies })(Welcome);

这是我在记录道具后进入控制台的内容：


  {…}
  
  公司：{…}

 test: "testing"
 <prototype>: Object { … }

  
  fetchCompanies：“函数（）{\ n返回dispatch（actionCreator.apply（this，arguments））; \ n}”
  
  导航：对象{pop：“ function（）{\ n var actionCreator = actionCreators [actionName]; \ n var action = actionCreator.apply（无效，0，参数）； \ n返回navigation.dispatch（action）; \ n}” ，popToTop：“ function（）{\ n var actionCreator = actionCreators [actionName]; \ n var action = actionCreator.apply（void 0，arguments）; \ n返回navigation.dispatch（action）; \ n}”，按下： “功能（）{\ n var actionCreator = actionCreators [actionName]; \ n var action = actionCreator.apply（void 0，arguments）; \ n返回navigation.dispatch（action）; \ n}“，…}
  
  screenProps：未定义
  
  ：对象{…}
  305278fb-9c91-40bc-b0b1-9fa113a58b1f：93248：15


我希望这里的人发现什么是行不通的，我错过了什么，并为此提供帮助。
在此先感谢您的时间和精力。

最佳答案

您可能想通过在render中记录道具来检查商店是否已更新。道具的任何变化都无法在构造函数中观察到。

props.fetchCompanies()调用一个函数，该函数返回一个函数。此函数将传递给分派，然后被redux-thunk拦截。

props.fetchCompanies()只会调用外部函数，而不是内部函数。内部函数需要一个参数（dispatch），由redux-thunk提供。

const mapDispatchToProps = (dispatch) => {
   return {
      fetchCompanies: () => dispatch(fetchCompanies())
   }
}

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

注意

您不必如上所述手动添加调度，因为connect会自动调度返回对象中的字段。

关于reactjs - redux reducer没有收到 Action ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55650494/