Как разобраться с Redux?

Question

[mishapsv]

Помогите понять Редакс?
Пересмотрел все примеры, перевел почти весь раздел "Basics" документации, вроде что-то понимаю, но ничего сделать не могу.

Допустим у нас есть каталог-компонент (использовал классы бутстрапа):

/* card.js */
import React, { Component } from 'react';

var pictures = [
  {descr: 'Стильный и модный', title: 'Iphone 6', id: 0, src: 'http://content2.onliner.by/catalog/device/header/5c89a202887278d66e83e9ea119a537d.jpg'},
  {descr: 'Стильный и модный 2', title: 'Iphone 5s', id: 1, src: 'http://content2.onliner.by/catalog/device/header/f16849c646ec7b06d7ceaa62c1a1b883.jpg'},
  {descr: 'Стильный и модный 3', title: 'Iphone 5', id: 2, src: 'http://content2.onliner.by/catalog/device/header/98b010c3ae263120c548aa3856fefc2f.jpg'},

];

export default class Card extends Component {
  render() {
    return (
      <div>
        <div>
          {pictures.map(picture => (
           <div className="col-sm-4 col-md-4">
                <div className="thumbnail">
                    <img src={picture.src} height="100" alt="..."/>
                    <div className="caption">
                        <h3>{picture.title}</h3>
                        <p>{picture.descr}</p>
                        <p><a href='#'
               className="btn btn-primary" role="button">Подробнее</a></p>
                    </div>
                </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Есть корневой элемент:

/* App.js */
import React, { Component } from 'react';
import Card from './card';

export default class App extends Component {
  render() {
    return (
      <Card/>
    );
  }
}

Который мы должны поместить следующий образом:

/*index.js*/
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import todoApp from './reducers';
import App from './App';
let store = createStore(todoApp);

let rootElement = document.getElementById('root');
React.render(
  // The child must be wrapped in a function
  // to work around an issue in React 0.13.
  <Provider store={store}>
    {() => <App />}
  </Provider>,
  rootElement
);

Экшены, которые описывают предполагаемые действия и экшен криэйторы - функции, которые выдают объект:

/*actions.js*/
export const SOME_ACTION = 'SOME_ACTION';
/*
 * action creators
 */
export function completeTodo(index) {
  return { type: SOME_ACTION, index };
}

Но вот как обрабатывать экшены редьюсером и привязывать это к событиям - непонятно:

/*reducers.js*/
import { combineReducers } from 'redux';
import { SOME_ACTION} from './actions';


function todos(state = [], action) {
  switch (action.type) {
{/*этот редьюсер написал не я*/}
  case SOME_ACTION:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

const todoApp = combineReducers({
  todos
});

export default todoApp;

Может быть кто-то напишет один-несколько примитивных примеров обработки изменения состояний?
Или может уделить немного времени через скайп/почту объяснить?

Answer 1

[Максим]

Добрый день, внесу свою лепту - https://www.gitbook.com/book/maxfarseer/redux-cour...
Подробный туториал (на русском) как сделать на редукс приложение, использующее VK API
Разобраны асинхронные запросы, миддлевэйр и все все все, что нужно для комфортного написания приложений без гугла. Если будут вопросы - буду рад ответить.

Answer 2

[Никита Гущин]

В данном редьюсере вы берете из массива state объект с индексом index и устанавливаете для него completed = true. Это и есть обработка экшена редьюсером.
Вот так, например, будет выглядеть редьюсер который сохраняет пользователя в стейт:

function todos(state = [], action) {
  switch (action.type) {
/*этот редьюсер написал я*/
  case ADD_USER_ACTION:
    return [ ...state, action.user ];
  default:
    return state;
  }
}

Далее, чтобы получить стейт - вам нужно использовать коннектор. Я последний месяц не смотрел редукс, так что API уже может отличатся, но примерно так:

@connect( state => ({ pictures: state.myPicturesReducerName }) )
export default class Card extends Component { 
  // ... 
 // yourPicturesReducer state -> this.props.pictures
  // ...
}