초보자를 위한 리덕스

저는 프로젝트를 진행 중이며 최근에 REDUX를 실험하고 있습니다. 처음에는 매우 겁이 났기 때문에 가장 중요한 것을 요약하고 매우 간단한 방법으로 설명하기 위해 작은 가이드를 공유하고 싶었습니다. 나는 그것이 다른 사람들을 돕기를 바랍니다.

나에 대해 조금 나는 초보자 소프트웨어 엔지니어이므로 더 나은 방법이 있거나 더 깨끗한 코드를 찾을 수 있습니다.

리덕스가 왜 좋은가요?
기본적으로 구성 요소에서 사용하기 위해 React에서 상태 및 소품을 전달하는 방법을 알고 있습니다. 때로는 1개 이상의 구성 요소에 전달해야 하므로 약간의 고통이 될 수 있습니다. Redux는 모든 구성 요소에서 이러한 기능/상태에 액세스하는 데 도움이 됩니다.

다음 가이드는 기본 카운터 응용 프로그램을 기반으로 합니다.

Redux 기본 사항에 대한 단계별 가이드

Redux를 설정하는 첫 번째 작업:
반응 앱을 만듭니다.npx create-react-app counter반응 앱으로 cd
터미널에서:npm install reduxnpm install react-redux
Redux에는 4개의 섹션이 있습니다(적어도 내가 지금까지 알고 있는 것).

섹션:
REDUCER - 거의 기능/상태
STORE - 전역화된 상태(어디서나 함수를 사용할 수 있도록 모든 구성 요소에 전달하는 것)
ACTIONS - 기능을 사용하는 데 도움이 됩니다(예: 증가/감소/true/false 변경 등(
DISPATCH - 작업을 발송합니다.

물론 내부적으로는 더 많은 일이 일어나고 있지만 다시 한 번 간단한 가이드를 제공하고 싶습니다.

/////////////////////////////////////////////////////////////
1 단계.
첫 번째 설정 파일 및 폴더
src 폴더에서 생성:
작업 폴더
감속기 폴더

2 단계.
작업 폴더에서 다음을 만듭니다.
index.js
감속기 폴더에서 다음을 만듭니다.
index.js
counter.js

3단계.
counter.js 파일에서

감속기:

const counterReducer = (state = 0, action) => {
  switch(action.type){
    case "INCREMENT":
      return state + action.payload;
    case "DECREMENT":
      return state - 1
    default:
        return 0
  }
};
export default counterReducer;

감속기가 여러 개인 경우 결합기를 사용할 수 있습니다.
결합기를 사용하기 전에 redux 라이브러리에서 가져옵니다.

import counterReducer from "./counter";
import { combineReducers } from "redux";

이 경우 감속기 폴더의 index.js에서 결합기 파일로 모든 감속기를 가져와야 합니다.

감속기가 설정되었으므로 이제
Store인 다음 섹션으로 이동할 수 있습니다.

4단계.
이 단계에서는 src/index.js 파일에서 작업합니다.
시작하려면 후크와 파일을 가져올 수 있습니다.

import { createStore } from 'redux';
import allReducers from './reducers/index.js'
import { Provider } from 'react-redux';

가져오기가 추가된 후:

const store = createStore(
  allReducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

저장소가 생성되면 이전에 생성한 allReduces 파일이 추가되고 기본적으로 개발자 도구에서 작업을 확인할 수 있는 다른 코드 줄이 추가됩니다. 그렇지 않으면 맹목적으로 작업해야 합니다.



현재 파일에서 마지막으로 설정해야 하는 것은 이전에 가져온 공급자입니다.
다음과 같이 공급자로 앱 구성 요소를 래핑합니다.
그런 다음 저장소 변수를 공급자 후크에 전달합니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

5단계
행위

action/index.js 파일에서

export const increment = (number) => {
    return {
        type : 'INCREMENT',
        payload: number
    }
}
export const decrement = () => {
    return {
        type : 'DECREMENT'
    }
}

**
마지막 단계
**

App.js 파일러에서
후크 및 파일 가져오기:

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

useSelector를 사용하면 상태를 설정하고 해당 함수의 결과를 표시하거나 사용할 수 있습니다.

const counter = useSelector(state => state.counter)
const dispatch = useDispatch()

디스패치 변수를 사용하여 마침내 카운터 버튼에 기능을 추가할 수 있습니다. 카운터 변수는 카운터의 합계를 추적합니다.

return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment(5))}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(signIn())}>Change state</button>
    </div>
  );

필터 또는 참 거짓 문과 같은 감속기로 다른 기능을 추가하고 로그인할 때 조건문을 만들 수도 있습니다.

이것은 예상보다 조금 더 길어졌지만 기본 사항을 요약해야 합니다.
도움이 되었기를 바랍니다.