Как reduсers обрабатывает данные в React Redux?

Есть проблема при попытке разобраться в примере.
Возможно вопрос звучит не правильно.

Возможно ошибка где-то в другом месте. Но я ее наблюдаю здесь.

После reduсers ничего не приходит. Точнее как я понял приходит только LOAD_REQUESTED.
Вроде как должно LOAD_OK.
function mapStateToProps(state) {
  return {
    counter: state.counter,
    app: state.app
  }
}


Весь листинг.

store/configureStore.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(rootReducer, initialState);
}


reducers/index.js
import { combineReducers } from 'redux';
import counter from './counter';

const rootReducer = combineReducers({
  counter
});

export default rootReducer;


reducers/counter.js
import { LOAD_OK, LOAD_REQUESTED } from '../actions/counter';

const defaultState = {
  loading: false,
  counter: [],
  app: {},
  errors: null
};

export default function company(state = defaultState, action) {
  switch (action.type) {

    case LOAD_REQUESTED:
      return {
        loading: true
      };

    case LOAD_OK:
      return [...state, {
        loading: false,
        counter: action.counter,
        app: action.app,
        errors: null
      }];

    default:
      return state;
  }
}


containers/root.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import CounterApp from './CounterApp';
import configureStore from '../store/configureStore';
import {setCounter} from '../actions/counter'

const store = configureStore();

export default class Root extends Component {
  componentWillMount() {
    store.dispatch(setCounter());
  }
  render() {
    return (
      <Provider store={store}>
        {() => <CounterApp />}
      </Provider>
    );
  }
}


containers/CounterApp.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/counter';

function mapStateToProps(state) {
  return {
    counter: state.counter,
    app: state.app
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch);
}

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


components/Counter.js
import React, { Component, PropTypes } from 'react';

class Counter extends Component {
  render() {
    const { counter, app } = this.props;
    return (
      <div>
        {counter.map((item, i) =>
          <div key={i} >{item.count}</div> 
        )}
        {app.total}
      </div>
    );
  }
}

Counter.propTypes = {
  counter: PropTypes.array.isRequired,
  app: PropTypes.object.isRequired
};

export default Counter;


actions/counter.js
import request from 'axios';

export const LOAD_REQUESTED = 'LOAD_REQUESTED';
export const LOAD_OK = 'LOAD_OK';

export function setCounter() {
  return dispatch => {
    dispatch({
      type: 'LOAD_REQUESTED'
    });

    request.get(
        Routes.root_path(), {
          headers: {
            'Accept': 'application/json'
          }
        }
      )
      .then(result => {
        dispatch({
          type: 'LOAD_OK',
          counter: result.data.counter,
          app: result.data.app
        })
      })
  }
}
  • Вопрос задан
  • 3484 просмотра
Решения вопроса 1
@vsuhachev
Редуцер должен возвращать объекты/хэши, а не так как у вас массивы.

Весь этот синтаксис { ...state, loading: true} означает: Возьми пустой объект, скопируй туда все содержимое state, а потом переопредели следующие ключи (loading и т.д.)

export default function company(state = defaultState, action) {
  switch (action.type) {

    case LOAD_REQUESTED:
      return {
        ...state,
        loading: true
      };

    case LOAD_OK:
      return {
        ...state,
        loading: false,
        counter: action.counter,
        app: action.app,
        errors: null
      };

    default:
      return state;
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@mishapsv
vsuhachev Вы не поможете разобрать этот код?
отсюда
case COMPLETE_TODO:
  return Object.assign({}, state, {
    todos: [
      ...state.todos.slice(0, action.index),
      Object.assign({}, state.todos[action.index], {
        completed: true
      }),
      ...state.todos.slice(action.index + 1)
    ]
  });


Почему там не используется постоянно
{ ...state, ...newState }?
У Object.assign({}, state, ...newState) есть какие-то особенности? Вроде аналогичны.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы