Question

我只是从React和Redux开始，偶然发现了我自己无法解决的问题-我认为 Redux状态没有改变，并且正在引起（某些）错误。我正在使用remote-redux-devtools@0.5.0检查状态。我的代码：

Categories.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getCategories } from '../../actions/categories';

export class Categories extends Component {
    static propTypes  = {
        categories: PropTypes.array.isRequired
    };

    componentDidMount() {
        this.props.getCategories();
    }

    render() {
        return (
            <div>
                Placeholder for categories.
            </div>
        )
    }
}

const mapStateToProps = state => ({
    categories: state.categories.categories
});

export default connect(mapStateToProps, { getCategories })(Categories);

../../ actions / categories.js：

import axios from "axios";

import { CATEGORIES_GET } from "./types";

export const getCategories = () => dispatch => {
  return axios
    .get("/api/notes/categories/")
    .then(res => {
      dispatch({
        type: CATEGORIES_GET,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

reducers / categories.js：

import { CATEGORIES_GET } from '../actions/types.js';

const initialState = {
    categories: []
};

export default function (state = initialState, action) {
    switch (action.type) {
        case CATEGORIES_GET:
            return {
                ...state,
                categories: action.payload
            };
        default:
            return state;
    }
}

store.js：

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

const initialState = {};
const middleware = [thunk];

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

export default store;

reducers / index.js

import { combineReducers } from "redux";
import categories from './categories';

export default combineReducers({
    categories,

}）;

使用remote-redux-devtools，我从未见过任何状态。目前，以上这段代码给了我3个错误，其中两个是

this.props.getCategories不是函数

我的猜测是，由于Categories类存在一些问题，它没有将任何内容传递给状态，而这可能是错误的根本原因。我还有一个错误，没有使用属性调用Categories，但是出于调试目的，我在其中放置了空数组-一个错误消失了，仅此而已。我也尝试过将构造函数添加到Categories并命名为super()，但也没有帮助。

Answer 1

我相信您的问题是，您导出了两次Categories类，一次连接一次，另一个没有。

如果您从export class Categories extends Component中删除了导出，它可以正常工作吗？

Answer 2

要在组件中映射状态时，必须通过化简器访问所需的变量。

所以代替：

const mapStateToProps = state => ({
    categories: state.categories
});

您必须使用：

const mapStateToProps = state => ({
    categories: state.categories.categories
});

Answer 3

您的道具没有getCategories方法，因为您没有将它作为函数传递给connect。

更好的方法是仅在操作文件中定义操作代码，然后使用mapDispatchToProps。

../../ actions / categories.js

import axios from "axios";

export const getCategories = () => {
  axios
    .get("/api/notes/categories/")
    .then(res => res.data);
    })
    .catch(err => console.log(err));
};

Categories.js

import { getCategories } from '../../actions/categories'
import { CATEGORIES_GET } from "./types";

const mapDispatchToProps = dispatch => {
  return {
     getCategories: () => dispatch(() => { type: CATEGORIES_GET, payload: getCategories() }),
  }
}

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

ReactJS：Redux状态没有改变

3 个答案: