redux 减速器未收到操作

Question

大家好，\n今天是我第一次尝试 Redux，我按照 YouTube 教程进行了样板设置，以将 Redux 与 React-Native 结合使用，显然，我遇到了一些问题，并且看不到我可能遇到的错误因为这个概念对我来说仍然有点模糊。

\n

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

\n

这是我的代码：

\n

店铺

\n

import {\n    createStore,\n    applyMiddleware\n} from 'redux';\nimport thunk from 'redux-thunk';\nimport rootReducer from './src/reducers/rootReducer';\n\nconst initialState = {};\n\nconst middleware = [thunk];\n\nconst store = createStore(rootReducer, initialState, applyMiddleware(...middleware));\n\nexport default store;\n

\n

根减速器

\n

import { combineReducers } from 'redux';\nimport companyReducer from './companyReducer';\n\nexport default combineReducers({\n    companies: companyReducer\n});\n

\n

公司减速机

\n

import { FETCH_COMPANIES } from '../actions/types';\n\nconst initialState = {\n    values: []\n};\n\nexport default (state = initialState, action) => {\n    switch(action.type) {\n        case FETCH_COMPANIES: return {\n            ...state,\n            values: action.payload\n        };\n        default: return {\n            test: 'testing'\n        };\n    }\n}\n

\n

公司行动

\n

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

\n

类型

\n

export const FETCH_COMPANIES = 'FETCH_COMPANIES';\n

\n

组件

\n

//imports\nimport {\n  connect\n} from 'react-redux';\nimport { fetchCompanies } from '../../actions/companyActions';\n\n//constructor\nclass Welcome extends Component {\n  constructor(props) {\n    super(props);\n    props.fetchCompanies();\n    console.log(props);\n  }\n}\n\n//map to props and connect\nconst mapStateToProps = (state) => ({\n  companies: state.companies\n});\n\nexport default connect(mapStateToProps, { fetchCompanies })(Welcome);\n

\n

这是我在记录道具后在控制台上得到的结果：

\n

\n

{\xe2\x80\xa6}

\n

公司：{\xe2\x80\xa6}

\n

 test: "testing"\n <prototype>: Object { \xe2\x80\xa6 }\n

\n

fetchCompanies: "function () {\\n returndispatch(actionCreator.apply(this,arguments));\\n }"

\n

导航：对象{ pop：“function（）{\\ n var actionCreator = actionCreators [actionName]; \\ n var action = actionCreator.apply（void 0，arguments）; \\ n返回navigation.dispatch（action）; \ \n }", popToTop: "function () {\\n var actionCreator = actionCreators[actionName];\\n var action = actionCreator.apply(void 0,arguments);\\n return navigation.dispatch(action); \\n }", push: "function () {\\n var actionCreator = actionCreators[actionName];\\n var action = actionCreator.apply(void 0,arguments);\\n return navigation.dispatch(action) ;\\n }", \xe2\x80\xa6 }

\n

screenProps：未定义

\n

: 对象 { \xe2\x80\xa6 }\n305278fb-9c91-40bc-b0b1-9fa113a58b1f:93248:15

\n

\n

我希望这里有人发现什么不起作用以及我错过了什么并帮助我解决这个问题。\n提前感谢您的时间和精力。

\n

Answer 1

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

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

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

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

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

笔记

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