редуктор редуктор не получает действие

Question

доброго времени суток всем, сегодня я впервые в редуксе, и я последовал обучающей программе на YouTube, чтобы настроить шаблон на использование редукса с реактивным-нативным, и, очевидно, я столкнулся с некоторой проблемой и не вижу ошибок, которые явозможно, с тех пор, как концепция все еще немного размыта для меня.

, поэтому я создал сокращенное действие и тип для использования в качестве отправной точки.проблема заключается в том, что после подключения состояния к компоненту и запуска действия в конструкторе компонента я получаю результат от действия (протестировал его с помощью журнала консоли), но состояние не изменяется.

хорошо, этомой код:

магазин

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 varactionCreator = actionCreators [actionName]; \ n var action = actionCreator.apply (void 0, аргументы); \ n вернуть navigation.dispatch (action); \ n} ", popToTop:" function () {\ n var actionCreator = actionCreators[actionName]; \ n var action = actionCreator.apply (void 0, аргументы); \ n вернуть navigation.dispatch (action); \ n} ", push:" function () {\ n var actionCreator = actionCreators [actionName];\ n var action = actionCreator.apply (void 0, arguments); \ n вернуть navigation.dispatch (action); \ n} ",…}

screenProps: undefined

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

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

Answer 1

Возможно, вы захотите проверить, обновлялся ли магазин, зарегистрировав реквизиты внутри render. Никаких изменений в реквизите в вашем конструкторе не наблюдается.

props.fetchCompanies() вызывает функцию, которая возвращает функцию. Эта функция передается диспетчеру, после чего она перехватывается redux-thunk.

props.fetchCompanies() просто вызовет внешнюю функцию, но не внутреннюю. Внутренняя функция требует аргумента (dispatch), который предоставляется избыточным-thunk.

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

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

ПРИМЕЧАНИЕ

Вам не нужно добавлять диспетчеризацию вручную, как показано выше, поскольку connect автоматически отправляет поля возвращаемого объекта.

Answer 2

Проверяли ли вы, правильно ли импортируются ваши actionTypes?

РЕДАКТИРОВАТЬ: Я проверил, в вашем случае редуктор по умолчанию вызывается первым, перед регистром FETCH_COMPANIES.Не уверен, почему это вызывается, но таким образом ваше состояние перезаписывается свойством test.Нет больше значения свойства.Затем 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);