ReactJS: состояние Redux не меняется

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

Redurs / 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;

redurs / 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

Когда вы отображаете состояние в компоненте, вы должны получить доступ к нужной переменной через редуктор.

Таким образом, вместо:

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

Вы должны использовать:

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

Answer 2

В ваших реквизитах нет метода 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);

Answer 3

Я полагаю, что ваша проблема в том, что вы экспортируете свой класс Categories дважды, один раз подключившись, другой нет.

Если вы удалите export из export class Categories extends Component, сделайте этоработать как положено?