sweetstate 응답 상태로 관리

React를 위한 간단한 상태 관리 솔루션을 찾으시겠습니까?이 글은 react-sweet-state를 어떻게 사용하는지 알려줄 것이다.

Check out the react-sweet-state example. It's a to-do list app I'll be referring to throughout this post.

왜 sweet state를 사용합니까?

sweetstate는 프로젝트 추적 소프트웨어 Jira의 상태 관리 수요를 충족시키기 위해 만든 것입니다.나는 알베르토가 creation of react-sweet-state에 올린 게시물을 보고 더 많은 배경 이야기를 이해할 것을 건의한다.
그것의 장점 중 하나는 응용 프로그램을 공급자에게 포장할 필요가 없다는 것이다.이것은 Jira와 같은 코드 라이브러리에 적용되며, 자신의 상태를 가진 많은 작은 응용 프로그램으로 구성되어 있다.두 응용 프로그램 사이의 공유 상태가 필요할 때, 모든 코드 라이브러리를 공급자에 봉인할 필요가 없을 때, 더욱 쉽다.

Redux vs sweet state

sweetstate가 Redux에 비해 얼마나 차이가 있는지 알고 싶을 수도 있습니다. 후자는 가장 광범위한 상태 관리 라이브러리를 사용합니다.
Redux와 sweet state 사이의 두 가지 주요 차이점은 다음과 같습니다.

sweetstate는 프로그램을 공급자에게 포장해야 하고, Redux는 필요합니다.

Redux는 별도의 동작과 감속기를 가지고 있다.sweet state는 이 두 가지를 한데 융합시킨다.

액셀러레이터: 상점, 영업 및 선택기

이 문서에서는 다음과 같은 몇 가지 상태 관리 개념을 설명합니다.

상점은 우리가 응용 프로그램을 설치한 모든 상태의 중심 위치이다.

작업은 저장소를 수정하는 것을 책임진다.UI에서 이러한 작업을 전송합니다.

선택기는 저장된 특정 블록을 UI로 반환합니다.

react sweet state 설치

선택한 패키지 관리자를 사용하여 sweet state를 설치합니다.

npm i react-sweet-state
# or 
yarn add react-sweet-state

sweetstatestore 만들기

우리가 사용할 예시 프로그램은 업무 목록 프로그램이다.가게 모양은 다음과 같습니다.

const initialState = {
  listName: 'My new list', // <- the name of our to-do list
  tasks: {} // <- all our to-do list items live inside this object
};

상점을 만들려면 전화createStore가 필요합니다.

// state/store/index.js
import { createStore } from 'react-sweet-state';

export const Store = createStore({
    initialState,
    actions: {},
    name: 'TasksStore'
});

Fun fact: we can use Redux Devtools when debugging sweet-state!
The name we choose for our store is used to identify it in there.

sweet 상태에서 선택기 만들기

모든 데이터를 sweetstatestore에 저장하기 때문에, UI에서 사용할 수 있도록 선택기가 필요합니다.
예를 들어, 작업 목록의 이름을 얻으려면 다음과 같이 하십시오.

// state/selectors/index.js
export const nameSelector = (state) => state.listName;

선택기를 만들면 createHook 를 사용하여 갈고리로 변환할 수 있습니다.

// state/store/index.js
import { createStore, createHook } from 'react-sweet-state';

export const Store = createStore({
    initialState,
    actions: {},
    name: 'TasksStore'
});

export const useName = createHook(Store, {
    selector: nameSelector
});

이제 UI에서 이 갈고리를 사용하여 상점에서 이름 값을 얻을 수 있습니다.

// components/name/index.js
import { useName } from '../../state/store';

const Name = () => {
    const [listName] = useName();
    return <NameView name={listName} />;
};

export default Name;

달콤한 상태에서 동작 만들기

사용자가 대기사항 목록의 이름을 수정할 때, 우리는 저장소의 이름 값을 수정하는 동작을 보낼 것입니다.
다음 작업을 수행합니다.

// state/actions/list-name/index.js
const updateListName = (listName) => ({ setState }) => {
    setState({ listName });
}

설정 상태 이해

이 동작은 다른 함수를 되돌려주는 함수라는 것을 알 수 있습니다.
그러나 UI에서 이 작업을 호출할 때는 외부 함수만 호출해야 합니다.

updateListName('New name');

배후에서 sweetstate는 setState 파라미터를 제공하는 문제를 처리할 것이다.
또한 저희 상점에는 tasks 및 listName 이 모두 포함되어 있지만, 저희는 listName 만 전송되었습니다.

setState({ listName })

이것은 당신이 호출할 때 setState 상점의 현재 내용과 간단하게 합쳐지기 때문이다. 다음과 같다.

{ ...state, listName }

React의 setState 기능과 동일한 작동 방식입니다.

getState 사용

setState 외에 sweetstate는 getState 함수를 제공한다.
만약 우리가 처리해야 할 사항 목록의 특정 임무를 수정해야 한다면, getState 을 사용하여 모든 임무를 먼저 얻을 수 있습니다.그리고 우리는 수정할 것을 찾을 수 있다.

// state/actions/tasks/index.js
const updateTaskName = (id, name) => ({ getState, setState }) => {
    const { tasks } = getState();
    const updatedTask = { ...tasks[id], name };
    setState({ tasks: { ...tasks, [id]: updatedTask } });
};

상태를 설정할 때 받은 상태 객체를 직접 수정하지 않도록 해야 합니다.이것은 우리가 이렇게 할 수 없다는 것을 의미한다.

const { tasks } = getState();
tasks[id].name = name

우리는 응용 프로그램이 저장소의 값이 변할 때 다시 렌더링하기를 원하지만, 상태 대상을 직접 편집하면 이런 상황이 발생하지 않습니다.

If you're dealing with complex state objects, you can also check out libraries like immer to make life easier.

상점에 작업 추가

이러한 작업이 정의되면 스토어로 돌아가서 추가해야 합니다.

// state/store/index.js
import { createStore } from 'react-sweet-state';

export const Store = createStore({
    initialState,
    actions: {
        updateListName,
        ...taskActions
    },
    name: 'TasksStore'
});

연결 액세스 동작 사용하기

선택기와 마찬가지로, 우리는 연결을 통해 우리의 조작에 접근하기를 희망한다.
우리가 만든 모든 선택기 연결은 당신에게 모든 조작을 제공했기 때문에 아무것도 할 필요가 없습니다.
우리는 갈고리 그룹에서 되돌아오는 두 번째 항목에 접근해서 그것을 사용할 수 있다.

const [listName, { updateListName }] = useName();

updateListName('new name');

선택기가 없는 갈고리 만들기

구성 요소는 데이터가 필요하지 않고 작업에 접근할 수 있습니다.이 경우 null 선택기를 createHook 에 전달할 수 있습니다.

export const useTaskActions = createHook(Store, {
    selector: null
});

이 새 갈고리를 사용할 때, 그룹의 첫 번째 요소를 무시해야 합니다. (왜냐하면null이기 때문입니다.)

const [, { updateTaskName, deleteTask }] = useTaskActions();

컨테이너를 사용하여 여러 상점 만들기

현재의 예시에서 우리는 처리해야 할 사항 목록을 포함하는 저장소를 가지고 있다.하지만 만약 우리가 두 개의 업무 명세서를 가지고 두 개의 상점을 원한다면?
이 경우 컨테이너를 사용하여 데이터 범위를 결정할 수 있습니다.

import { createContainer } from 'react-sweet-state';

export const TodoListContainer = createContainer(Store);

그리고 그것을 모든 업무 항목 목록에 둘러싸라.

<TodoListContainer scope={id}>
    { /** To-do list code here */ }
</TodoListContainer>

전송scope 속성을 통해 이 용기에 사용되는 모든 조작이나 선택기는 이 용기에 한정됩니다.

도구를 용기에 넣다

용기 전달 도구도 사용할 수 있습니다. 이 도구들은 동작에서 사용할 수 있습니다.
작업 목록의 사용자 기본 설정이 있는 경우:

<TodoListContainer userPreferences={userPreferences} />

그런 다음 작업에서 이 데이터를 액세스할 수 있습니다.

const updateTaskName = (id, name) => (
    { getState, setState },
    { userPreferences }
) => {
   // ...
};

결론

상점, 선택기, 조작이 있으면 sweetstate로 상태 관리를 할 수 있습니다!
더 높은 용례에 대해 저는 당신이 보기를 권장합니다sweet-state docs.