redux reducer 未收到操作

Question

大家好， 今天是我第一次使用 redux，我按照 youtube 教程设置了我的样板设置，以使用带有 react-native 的 redux，显然，我遇到了一些问题，并且看不到我可能犯的错误，因为这个概念仍然对我来说有点模糊。

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

这是我的代码：

商店

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: "function () {\n return dispatch(actionCreator.apply(this, arguments));\n }"

navigation: Object { pop: "function () {\n var actionCreator = actionCreators[actionName];\n var action = actionCreator.apply(void 0, arguments);\n return 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 }", ... }

screenProps：未定义

: 对象 { … } 305278fb-9c91-40bc-b0b1-9fa113a58b1f:93248:15

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

Answer 1

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

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

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

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

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

注意

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

Answer 2

您是否检查过您的 actionTypes 是否正确导入？

编辑： 我检查了你的减速器默认情况，在情况 FETCH_COMPANIES 之前首先调用。不知道为什么要调用它，但是这样你的状态就会被测试属性覆盖。不再有 values 属性。然后在您的构造函数中调用 fetchCompanies。它为您的状态增加了价值。您的 mapStateToProps 中有 state.companies 但您所在的州没有这样的属性。试试

values: state.values 你会看到你的公司

Answer 3

我想建议对操作进行细微的更改。

import {
    FETCH_COMPANIES
} from './types';

export const fetchCompanies = payload => ({type: FETCH_COMPANIES, payload})

像这样更新组件

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

    const payload = [{
            id: 1,
            text: "CHRONUS FRANCE .A."
        },
        {
            id: 2,
            text: "two"
        },
        {
            id: 3,
            text: "three"
        },
        {
            id: 4,
            text: "four"
        }]

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

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

   const mapDispatchToProps = dispatch => bindActionCreators({fetchCompanies}, dispatch)


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