Простой стартовый React-Redux шаг за шагом

Это пошаговое руководство по созданию проекта React с помощью Redux:

1 — Запустите реактивный проект командой:

npx create-реагировать на имя приложения

2 — После создания проекта перейдите в его каталог.

cd название приложения

3 — Установите библиотеки «redux» и «react-redux» (через npm или пряжу)

npm установить react-redux
npm установить redux

or

пряжа добавить реакцию-восстановление
пряжа добавить избыточность

4 — В index.js есть много вещей, которые нужно сделать:

- создать хранилище, импортировав функцию createStore и присвоив ей константу
— обернуть компонент App компонентом Provider (импортирован из 'react-redux'
— импортировать rootReducer, который еще не создан , чтобы передать его в качестве параметра функции createStore

импортировать { createStore} из ‘redux’;
импортировать { Provider } из ‘react-redux’;
импортировать rootReducer из ‘./reducers/root.reducer’;

const store = createStore (rootReducer);

ReactDOM.render(
‹Provider store={store}›
‹App /›
‹/Provider›,
document.getElementById('root')
) ;

5 — root.reducer.js

Корневой редьюсер — это файл, в котором объединены все редьюсеры приложения.
Для этого функция combReducers должна быть импортирована из 'redux' вместе со всеми другими редюсерами, которые у вас могут быть.
Мы экспортируем файл константа с именем rootReducer, которая будет назначена для функции combReducers с объектом в качестве параметра
Этот объект будет содержать ключ и соответствующий редьюсер.
Имя этого ключа важно для доступа к состояниям из другие редукторы!

импортировать {combinedReducers} из ‘redux’;
импортировать otherReducer из ‘./other.reducer’;
импортировать otherReducer из ‘./another.reducer’;

const rootReducer = combReducers({
otherReducerKeyName: otherReducer,
otherReducerKeyName: otherReducer
})

экспортировать rootReducer по умолчанию

6 — другой.reducer.js

Это основа файла редуктора.
Эта функция получает состояние (с initialState по умолчанию) и действие из dispacth и некоторых других переменных внутри полезной нагрузки.

const initState = {
параметр: initial_value
}

const otherReducer = (state = initState, action) =› {
switch (action.type) {
case 'ACTION_TYPE_1':
return {
…state,
параметр: новое значение
}
case 'ACTION_TYPE_2':

/// здесь логика

return {
…состояние,
параметр: новое значение
}
по умолчанию:
возвращаемое состояние

}
}

экспортировать по умолчанию otherReducer

7 — Компонент.jsx

В файле компонента мы должны:

— импортировать React и компонент из react
— импортировать функцию connect из react-redux
— создать функцию mapState для ПОЛУЧЕНИЯ данных из хранилища
— создать функцию dispatchState для ОТПРАВКИ действия и, возможно, полезная нагрузка (данные) в хранилище

функция подключения: она будет использоваться в конце файла при экспорте, передавая mapState и dispatchState в качестве параметров:

экспортировать соединение по умолчанию (состояние карты, состояние отправки) (имя компонента);

mapState: он должен быть объявлен в теле класса, получая состояние в качестве параметра и возвращая объект.
Ключ объектов — это способ доступа к переменной состояния внутри класса с помощью: this.props. ключ_переменной

его значение будет следующим: state.key_name_in_root_reducer.key_name_in_specific_reducer

const mapState = (state) =› {
return {
variable_key: state.key_name_in_root_reducer.key_name_in_specific_reducer
}
}

dispatchState: функция dispacth получает отправку в качестве аргумента.
она также возвращает объект. всякий раз, когда его ключ вызывается внутри компонента (например, событием onClick), он активирует свое значение.
значение представляет собой стрелочную функцию с отправкой в ​​обратном вызове.
в свою очередь, функция отправки также будет иметь объект в качестве параметра, по крайней мере, с одним ключом: type со своим действием в качестве значения
мы также можем отправить полезную нагрузку с любыми другими данными, которые будут использоваться в редукторе:

const dispatchState = (dispatch) =› {
return {
doSomething: () =› dispatch({
type: 'ACTION_TYPE_1',
payload: ///
> })
}
}

пример полного файла:

импортировать React, {Component} из «реакции»;
импортировать {connect} из «реагировать-редукс»;

class ComponentName расширяет компонент {

оказывать() {

const handleClick = () =› {
this.props.addingOne()
}

возврат (
‹div›

‹h2›Количество: {this.props.cnt}‹/h2›

‹button onClick={handleClick}›Добавить 1‹/button›

‹/дел›
);
}

}

const mapState = (state) =› {
return {
cnt: state.counter.count
}
}

const dispatchState = (dispatch) =› {
return {
addOne: () =› dispatch({
type: 'ACTION_TYPE_1',
})
}< br /> }

export default connect(mapState, dispatchState)(ComponentName);

Применяя redux, состояние в вашем приложении будет стабильным и легко доступным для всех ваших компонентов!