Как реализовать данный React код на Redux используя mapStateToProps и mapDispatchToProps?

Question

[nathan111777]

Здраствуйте! Только начал изучать Redux, и хочу научиться писать код с использованием Redux но нужна помощь более опытных разработчиков. В интернете есть примеры приложений но они слишком тяжелые для новичка, нужно что-то проще, для начала думаю можно попробовать реализовать какой-то простой функционал. Первое что пришло в голову это вкладки. Кроме того хочу увидеть как на практике применяются mapStateToProps и mapDispatchToProps.
У меня есть React код реализующий вкладки:

import React from "react";
import ReactDOM from "react-dom";

const items = [
  { title: "London", content: "London is the capital city of England." },
  { title: "Paris", content: "Paris is the capital of France." },
  { title: "Tokyo", content: "Tokyo is the capital of Japan." }
];

class TabContent extends React.Component {
  render() {
    return (
      <div className="tabcontent">
        <h3>{this.props.title}</h3>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: 0
  };

  openTab = e => {
    this.setState({
      active: +e.target.dataset.index
    });
  };

  render() {
    return (
      <div>
        <div className="tab">
          {this.props.items.map((n, i) => (
            <button
              className={`tablinks ${i === this.state.active ? "active" : ""}`}
              onClick={this.openTab}
              data-index={i}
            >
              {n.title}
            </button>
          ))}
        </div>

        {this.props.items[this.state.active] && (
          <TabContent {...this.props.items[this.state.active]} />
        )}
      </div>
    );
  }
}

ReactDOM.render(<Tabs items={items} />, document.getElementById("root"));

Как реализовать данный React код на Redux используя mapStateToProps и mapDispatchToProps?
Тот же React код в песочнице(с подключенными зависимостями для Redux):
https://codesandbox.io/s/react-tabs-redux-example-8d7st

Answer 1

[microlabig]

1) установить redux, react-redux в проект
2) добавить HOC connect и подключить mapStateToProps и mapDispatchToProps:

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux"; 


// здесь описание вышеприведенных компонентов ...


// для трансформации текущего redux-store в props компонента
const mapStateToProps = state => {
	return {
		items: state.items
	}
}

// для трансформации текущих redux-dispatch в props компонента
const mapDispatchToProps = dispatch => {
	return {
		addItem: {title, content} => {
			dispatch(addItem({title, content}));
		},
		// ...
	}
}

const TabsWithRedux = connect(mapStateToProps, mapDispatchToProps)(Tabs);

// -----------
// redux-store
// -----------

// начальный state
const initialState = {
	items: [
	  { title: "London", content: "London is the capital city of England." },
	  { title: "Paris", content: "Paris is the capital of France." },
	  { title: "Tokyo", content: "Tokyo is the capital of Japan." }
	]
};

// создадим, к примеру, функционал добавления нового item
const ADD_ITEM = "ADD_ITEM";

// экшн
const addItem = item => {
	return {
		type: ADD_ITEM,
		payload: item
	};
};

// рутовый редьюсер
const rootReducer = (state = initialState, {type, payload} => {
	switch (type) {
		case ADD_ITEM: 
			return {
				items: [...state.items, payload]
			}
		default:
			return state
	}
});

// основной стор
const store = createStore(rootReducer);

// рендер
ReactDOM.render(
	<Provider store={store}>
		<TabsWithRedux items={items} />
	</Provider>, 
	document.getElementById("root")
);