Вступление

Привет (генерал Кеноби). Давайте немного поговорим о том, что такое Redux, и поймем, как мы можем реализовать это с помощью реакции без особых сложностей. Прежде чем говорить о сокращении, нам нужно понять несколько вещей, чтобы убедиться, что все находятся на одной странице, поскольку вы можете быть новичком или не иметь опыта работы с React. Не волнуйтесь, если вы ничего не знаете о реакции, потому что я объясню вам так, чтобы вы поняли, какую проблему мы пытаемся решить здесь.

Понимание основ

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

1. Чтобы синий блок мог получать информацию о зеленом блоке, он должен находиться внутри зеленого блока.
2. Если оранжевому блоку нужна информация, которая находится внутри зеленого блока, эту информацию необходимо переместить в черный блок.

Проблема

Представьте, что у вас есть сложное и большое приложение, и вам нужно передать данные из компонента верхнего уровня в компонент нижнего уровня. Вероятно, это будет сложное кодирование и передача данных компоненту, который никогда их не будет использовать. Мы называем это буровым каналом.

Redux

Что такое госуправление?

С самого начала этой статьи мы говорили только о том, как мы можем обрабатывать состояния компонентов и компонентов с вашим собственным состоянием. Управление состоянием - это то, как мы можем решить эту проблему, когда ваше приложение растет.

Что такое Redux?

Redux - это библиотека для управления состоянием приложения.

Почему я должен использовать Redux?

Как мы видели раньше, становится сложно управлять состояниями, общими для компонентов.

Когда мне следует использовать Redux?

Это хороший вопрос, потому что те, кто работает с React, знают, что есть другой способ сделать это, а для тех, кто хочет знать, я говорю о React-хуках, mobx и других.

Я здесь не для того, чтобы рассказывать вам, что вам следует использовать, потому что это зависит от того, какое приложение вы создаете и над которым работаете, но если приложение не такое сложное, вы можете использовать перехватчики React.

Условия Redux

• Состояние - это объект, который описывает части приложения.
• Наше мнение будет основано на состоянии.
• Действия меняют наше состояние.
• Вернемся к представлению, когда действие что-то меняет в нашем состоянии, представление будет повторно отрисовано.

• Действия в Redux: действие - это в основном полезная нагрузка, которая описывает и отправляет данные из нашего приложения в наш магазин.

{type: "todos/addTodo",payload: {text:"Redux"}}

const addTodo = text => {
 return {
  type: 'todos/addTodo',
  payload: text
 }
}

const todoReducer= (state = {}, action) => {
   switch (action.type) {
     case "todos/addTodo":
       return {
         ...state,
         ...action.payload
       };
     default:
       return state;
   }
 };

const store = createStore(todoReducer);

store.dispatch(addTodo("Todo"))

const getTodos = state => state.value
//getState returns the current state 
const todos = getTodos(store.getState())

• Первый шаг: нам нужно импортировать createSlice, эта вспомогательная функция позволяет нам определять наш редуктор и начальное состояние, а также заботится о генерации создателей действий и типов. Если вы внимательно посмотрите на код в createSlice, там есть ключ с именем «name», это имя является первой частью типа каждого редуктора, а вторая часть нашего типа является ключом каждого редуктора. У нас есть что-то вроде этого, наша первая часть типа - это имя «todos» + вторая часть - это ключ «addTodo». Каждый создатель действия имеет то же имя, что и функция редуктора.

//src\todoSlice.js
import { createSlice } from '@reduxjs/toolkit'
const todoSlice = createSlice({
 name: 'todos',
 initialState: {
   value: {}
 },
 reducers: {
   addTodo: (state, action) => {
     const {payload, type} = action;
     state.value[payload] = {id: payload, value: payload};
   }
 }
})
export const { addTodo } = todoSlice.actions;
export default todoSlice.reducer;

//src\store.js
import { configureStore } from '@reduxjs/toolkit'
import todoSlice from './todoSlice';
 export default configureStore({
  reducer: {
    todos: todoSlice,
  //system
 }
})

//src\App.js 
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import App from './App';
import store from './store';
ReactDOM.render(
 <Provider store={store}>
  <React.StrictMode>
   <App />
  </React.StrictMode>
 </Provider>,
 document.getElementById('root')
);

//src\form import React, {useState} from 'react';
import { useDispatch } from 'react-redux';
import {addTodo} from './todoSlice';
const Form = () => {
   const [text, setText] = useState(''); 
   const dispatch = useDispatch(); 
   const onSaveTodo = () => {
       dispatch(addTodo(text));
       setText('');
   }
   return (
       <>
           <input onChange={(e) => setText(e.target.value)} value=              {text}/>
           <button onClick={() => onSaveTodo()} >Add</button>        </>
    );
}  
export default Form;

import React from 'react';
import { useSelector } from 'react-redux';
const List = () => {
   const todos = useSelector((state) => state.todos.value); 
   const values = Object.values(todos);
   return (
      <>
          {
              values.map((todo, index) => <div key={todo.id}>{index + 1} - {todo.value}</div>)
          }
      </>
   );
}
export default List;

import React from 'react';
import Form from './form';
import List from './List';
const App = () => {
  return (
   <div>
     <Form/>
     <List/>
   </div>
 );
}
export default App;