반응 + Redux = 반응 + 컨텍스트

이미 많은 기사에서 Redux를 Context로 대체할지 여부에 대해 이야기하고 있습니다. 그렇다면 장단점 등은 무엇입니까? 그러나 나는 이것이 그들 중 하나라고 생각하지 않습니다.

This is simply for fun 😁. But still, you can try this in your pet projects 😉.

Hoping you have installed NodeJS, npm, and npx

먼저 기본 반응 템플릿을 설정해 보겠습니다. 함께 플레이하고 싶은 즐겨찾는 디렉토리로 이동합니다. 운영,npx create-react-app fooapp
앱 디렉토리를 변경합니다cd fooapp.

이제 앱npm start을 시작합니다. 앱이 시작되어 http://localhost:3000/ 의 브라우저에서 열리길 바랍니다.

src 아래에 폴더 저장소를 만듭니다.cd src && mkdir storestore 아래에 두 개의 파일을 만듭니다. index.js 및 handlers.jsindex.js 파일에서 store . 우리는 컨텍스트를 만들 것입니다.

/** 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
};

목록에서 todo를 추가/제거하는 핸들러를 만들어 봅시다. store/handlers.js에서 .

/* 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 });
};

업데이트src/index.js 파일. 다음 내용을 추가합니다.

// 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);

Don't mind if it throws an error. We will update it.

components 디렉토리 아래에 폴더src를 만듭니다. Todo.js , TodoField.js & TodoItem.js 세 파일을 추가합니다.
components/Todo.js 파일에서 구성 요소를 만듭니다. 그것은 할 일 목록을 보유하고 있습니다.

// 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;

지금쯤 오류가 사라졌어야 했습니다.
components/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;

components/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;

모든 파일을 추가한 후. 앱은 이렇게 작동해야 합니다.


모든 데이터는 단일 저장소에서 조작되며 핸들러를 사용하여 조작됩니다.

You could use get and set method in Lodash for complex JSON object operations.
PS: The above method can also handle async operations based on Promise.

구현은 codesandbox 에 있습니다.
행복한 코딩. 👩‍💻👨‍💻.... 😀