How to deal with Redux?

Question

React

Help me understand Redax?
I reviewed all the examples, translated almost the entire "Basics" section of the documentation, I seem to understand something, but I can't do anything.
Let's say we have a component directory (I used the bootstrap classes):

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

There is a root element:

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

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

Which we should put in the following way:

/*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 that describe intended actions and action creators are functions that return an object:

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

But here's how to handle actions with a reducer and bind it to events - it's not clear:

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

Maybe someone will write one or a few primitive examples of state change handling?
Or maybe take some time via skype/mail to explain?

Answer 1

Good afternoon, I'll do my bit - https://www.gitbook.com/book/maxfarseer/redux-cour...
A detailed tutorial (in Russian) on how to make an application using VK API on
redux everything you need to comfortably write applications without Google. If there are questions, I will be happy to answer.

Answer 2

In this reducer, you take an object with index index from the state array and set completed = true for it. This is the processing of the action by the reducer.
This is how, for example, the reducer that saves the user to the state will look like:

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

Next, to get the state - you need to use the connector. I haven't looked at redux for the last month, so the API may already be different, but something like this:

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