0

Начал изучать Redux для использования в связке с React. Я понял что Redux только управляет состояниями, но мне не удается восстановить поток выполнения для простого примера. Помогите пожалуйста разобраться как он работает в духе 1... 2... 3.... Спасибо.

Есть несколько файлов:

app.js:

export default class App extends Component {
  render() {
    return (
        <div>
          <BookList />
        </div>

    );
  }
}

Тут все понятно, но вот второй файл использующий Redux вызывает затруднения.

book-list.js:

class BookList extends Component {

  renderList() {
    return this.props.books.map((book) => {
      return (
        <li key={book.title} className="list-group-item">{book.title}</li>
      );
    });
  }

  render() {
    return (
      <ul className="list-group clo-sm-4">
        {this.renderList()}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    books: state.books
  };
}

export default connect(mapStateToProps)(BookList);

В особености mapStateToProps и последняя строка импорта.

И есть редюсер:

const rootReducer = combineReducers({
  books: BooksReducer
});

export default rootReducer;

И index.js

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

И reduser_books.js

export default function() {
  return [
    { title : 'Javascript'},
    { title : 'Java'},
    { title : 'C#'},
    { title : 'Goggle Go'},
    { title : 'Python'}
  ]
}

Как я понял этот код иллюстрирует самый простой пример связки React-Redux. Как его правильно прочесть?

5
  • 1
    кода BooksReducer не хватает для полноты еще. и действий (actions), если они у вас есть
    – user177221
    24 окт 2017 в 19:27
  • @PashaPash♦ да вы правы спасибо за подсказку. Обновил вопрос.
    – Pavel
    24 окт 2017 в 19:36
  • пример достаточно странный. redux - это цикл "стейт + действие => reducer => новый стейт". а у вас нет действий и нет изменения стейта. т.е. redux у вас в примере не раскрыт, по этому коду не получится сказать "redux тут нужен для управления стейтом по таком-то принципу"
    – user177221
    24 окт 2017 в 19:40
  • Посмотрите курс Дениса Абрамова, он тут объясняет как устроены функции redux и react-redux изнутри и как их правильно применять egghead.io/courses/getting-started-with-redux 24 окт 2017 в 19:41
  • @Igor Golovin да я вот как раз по курсу и иду, только на английском треть слов выпадает и когда идет обсуждение сложных моментов начинаются проблемы.
    – Pavel
    24 окт 2017 в 20:17

1 ответ 1

1

"Магия" начинает с компонента <Provider>. Его основная задача -- пробросить store во все компоненты приложения. Делает он это с помощью React Context. React Context позволяет определить данные доступные дочерним компонентам. Напрямую React Context вы не используете в приложение, но его использует функция connect.

combineReducers - занимается объединением редьюсеров, создавая каждому редьюсеру отдельное место в state. При инициализации редьюсеров они возвращают свое начальное состояние, которое и помещается в общий state приложения. В вашем случае редьюсер всегда возвращает массив книг (что не совсем правильно с точки зрения Redux), поэтому этот массив и будет присвоен как начальное значение для state.books.

Функция connect делает очень много работы. Основные ее задачи:

  1. Подписка на изменения state для перерисовки компонента
  2. Передача необходимых значений из общего state приложения в компонент через props
  3. Передача Action Creators в компонент через props

Как это все работает: в функции mapStateToProps вы определяете, какие данные из общего state вам нужны в данном компоненте. Функция на входе получает общий state приложения, а возвращает выбранные вами отдельные данные, после чего эти данные будут присвоены как this.props в компоненте. По сути эта функция определяет отображения state на ваш компонент. В вашем случаем вы возвращаете из функции {books: state.books}, т.е. вы говорите что хотите чтобы в компоненте this.props.books было равно state.books (а как мы помним state.books получило массив книг из редьюсера при инициализации).

Примерно с помощью такого же отображения функция connect подключает и Action Creators, но у вас их нет.

Также коннект подписывается на изменения state приложения и в случаи его изменения проверяет, изменились ли данные на которые вы подписаны через mapStateToProps и если они изменились, меняет props что по умолчанию вызывает перерисовку компонента в react.

Функция connect работает через Higher-Order Components создавая компонент-обертку поверх вашего компонента (что хорошо видно через React DevTools) и подключается к react context созданный <Provider> для получения store

Поскольку у все нет экшенов и state приложения не меняется, на этом жизненный цикл вашего приложения заканчивается.

4
  • По вашей же ссылке If you aren’t familiar with state management libraries like Redux or MobX, don’t use context. 26 окт 2017 в 15:22
  • @Pavel так не используйте контекст, зачем он вам? 26 окт 2017 в 15:49
  • Вы написали что redux прокидывает контекст в компоненты и привели ссылку на документацию, в которой написано что библиотеки такие как redux и mobx не используют context 26 окт 2017 в 16:07
  • @Pavel я такого в доках не читал. Если что фраза If you aren’t familiar with state management libraries like Redux or MobX, don’t use context. Переводится как: Если вы не знакомы с библиотеками управляющие состоянием приложения такими как Redux или MobX, то не используйте контекст. 26 окт 2017 в 16:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.