React + Redux = React + Context

من می‌دانم در حال حاضر بیش‌تر مقالات در این زمینه در این مورد است که آیا Redux را جایگزین Context بکنیم یا نه؟ اگر جواب بله است دلیل آن چیست؟ اما این مقاله با بقیه فرق دارد.

ابتدا بیاید تنظیمات اولیه React را انجام دهیم، ابتدا دایرکتوری مورد نظر خود را انتخاب کنید سپس این کد را در ترمینال اجرا کنید

npx create-react-app fooapp

وارد دایرکتوری fooapp شوید: cd fooapp.

حالا برنامه را اجرا کنید: npm start. امیدوارم که برنامه اجرا شده و در مرورگر شما با آدرس http: // localhost: 3000 / نمایش داده شود.

یک پوشه داخل پوشه src به اسم store بسازید: cd src && mkdir store.

دو فایل به اسم‌های index.js و handlers.js داخل پوشه store بسازید.

داخل این فایل index.js ما Contex را ایجاد می‌کنیم.

/** index.js **/
import React from "react";
import PropTypes from "prop-types";

// Import all handlers
import * as handlers from "./handlers";

// Default state
const initialState = { todos:[] };

// Export the context
export const Context = React.createContext({ state: initialState, handlers });

// Export the provider
export const Provider = ({ children }) => {
  // This will be our global state
  const [state, setState] = React.useState(initialState);

  // Modify our hanlders with state and setState
  // Thanks Jose for this one ?
   const modHandlers = Object.keys(handlers).map(key => handlers[key](state, setState))

  // Feed the state and modified handlers to the provider
  return (
    <Context.Provider value={{ state, handlers: modHanlders }}>
      {children}
    </Context.Provider>
  );
};

Provider.propTypes = {
  children: PropTypes.children.isRequired
};

بیایید handlers را حذف یا اضافه کرد به لیست داخل پوشه store ایجاد کنیم.

/* handlers.js*/
export const addTodo = (state, setState) => todo => {
  state.todos.push(todo);
  setState({ ...state });
}

export const removeTodo = (state, setState) => i => {
  delete state.todos[i];
  setState({ ...state });
};

فایل index.js داخل پوشه src را به‌روز کنید. مطالب زیر را اضافه کنید.

// src/index.js
import React from "react";
import ReactDOM from "react-dom";

import Todo from "./components/Todo";
import { Provider } from "./store";

function App() {
  return (
    <Provider>
      <div className="App">
        <h2 className="apptitle">Todo List</h2>
        <Todo />
      </div>
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

در دایرکتوری src پوشه components را ایجاد کنید و داخل components سه فایل به نام‌های Todo.js، TodoField.js و TodoItem.js بسازید.

دوره آموزشی کامل Redux در وب سایت راکت

در Todo.js یک کامپوننت بسازید که قرار است لیست‌های to do را نگه دارد.

// components/Todo.js
import React from "react";

import TodoItem from "./TodoItem";
import TodoField from "./TodoField";
import { Context } from "../store";

const Todo = props => {
  // Get the state from Context using useContext hook
  const { state } = React.useContext(Context);

  return (
    <div>
      <TodoField />
      <ul>
        {state.todos.map((todo, i) => (
          <TodoItem value={todo} index={i} />
        ))}
      </ul>
    </div>
  );
};

export default Todo;

ارور دیگر باید رفع شده باشد.

کد زیر را به TodoField.js اضافه کنید.

// components/TodoField.js
import React from "react";

import { Context } from "../store";

const TodoField = () => {
  const [todo, setTodo] = React.useState(null);

  // Import the handlers from context
  const { handlers } = React.useContext(Context);

  // Handles form and other things
  const handleSubmit = e => {
    e.preventDefault();
    // Add the todo to the store
    handlers.addTodo(todo);
  };

  const handleChange = e => {
    setTodo(e.target.value);
  };

  // Form with field and submit button
  return (
    <form onSubmit={handleSubmit} onChange={handleChange}>
      <input type="text" value={todo} required />
      <input type="submit" value="Add Todo" />
    </form>
  );
};

export default TodoField;

این کد را هم به TodoItem.js اضافه کنید

// components/TodoItem.js
import React from "react";

import { Context } from "../store";

const TodoItem = ({ value, index }) => {
  const { handlers } = React.useContext(Context);
  const removeFromTodo = e => {
    handlers.removeTodo(index);
  };

  return (
    <li>
      {value} <button onClick={removeFromTodo}>x</button>
    </li>
  );
};

export default TodoItem;

بعد از اضافه کردن تمام فایل‌ها. برنامه شما باید مثل این کار کند.