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

Question

[Дима Моричев]

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

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

После 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
        })
      })
  }
}

Comments

[Дмитрий Полушкин]

Советую глянуть на документацию, которая недавно была написана.

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

Comments

[Дима Моричев]

Да уж. Два дня потратил, так и не смог разобраться как это работает. Спасибо!

[Сергей Сова]

Редуцер??? Ну как бы вам по шапке за произношение
Редьюсер, если уж решили произносить английское название!

Answer 2

[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) есть какие-то особенности? Вроде аналогичны.

Comments

[vsuhachev]

ES7 spread синтаксис можно использовать как для хэшей таки и для массивов. Для хэшей он аналогичен Object.assign, теоретически они могли записать все через spread, но видимо написали так как есть для наглядности.

[mishapsv]

vsuhachev Спасибо за пояснение!

[Максим]

mishapsv: состряпал курс, может поможет - https://www.gitbook.com/book/maxfarseer/redux-cour...

[badgoto]

maxfarseer: курс по react отличнейший! Спасибо! Этот тоже пройду обязательно.