Redux-slice

목차

 

 

역시 학은 쉽고 습은 어렵다.

그래도 해결했으니 다행이다.

"학(學)과 습(習)"의 차이를 아시나요?

 

Slick

Slick은 createReducer와 createAction 두 개의 함수를

createSlice 하나의 함수로 관리하는 방식이다.

설치

 

포스트 한지 좀 됐으니 설치부터 다시 가보자.

터미널에 입력하면 된다.

npm i redux

redux 설치 명령어이다.

npm i @reduxjs/toolkit

redux 코드를 간편화 시켜주는 toolkit 설치 명령어이다.

npm i react-redux

redux를 react에 접목시켜주는 패키지 설치 명령어이다.

코드

//Store.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

const store = createSlice({
  name: "storeReducer",
  initialState: {text:'', count: 0},
  reducers: {
    add: (state, action) => {state.text = action.payload},
    plus: (state, action) => {state.count++}
  }
});

export const { add, plus } = store.actions;
export default configureStore({ reducer: store.reducer });

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import store from './Store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

//App.js
import React, { useState } from "react";
import { connect } from "react-redux";
import {add, plus} from './Store';

function App({store, addText, plusCount}) {
  const [text,setText] = useState('');
  
  function handleInput(e){
    setText(e.target.value);
  }
  
  function onSubmit(e){
    e.preventDefault();
    addText(text);
    setText('');
    console.log(store);
  }
  
  function onClick(e){
    plusCount(store.count);
    console.log(store);
  }

  return (
    <>
      {store.count}<button onClick={onClick}>Plus Count</button>
      <form onSubmit={onSubmit}>
        <input value={text} onChange={handleInput}/>
        <button>Submit</button>
      </form>
      {store.text}
    </>
  );
}

function mapStateToProps(state) {
  return { store: state };
}

function mapDispatchToProps(dispatch) {
  return {
    addText: text => dispatch(add(text)),
    plusCount: () => dispatch(plus())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

해석

Store

//Store.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

const store = createSlice({
  name: "storeReducer",
  initialState: {text:'', count: 0},
  reducers: {
    add: (state, action) => {state.text = action.payload},
    plus: (state, action) => {state.count++}
  }
});

export const { add, plus } = store.actions;
export default configureStore({ reducer: store.reducer });

위에서 말했듯, createSlice를 통하여

reducer와 action을 한 번에 만들어보자.

const store = createSlice({
  name: "storeReducer",
  initialState: {text:'', count: 0},
  reducers: {
    add: (state, action) => {state.text = action.payload},
    plus: (state, action) => {state.count++}
  }
});

• name : 필수값이다. 없으면 에러가 뜨니 간단히 적자.
• initialState : 초기값을 뜻한다. object형식으로 key / value 형식으로 기입하면 된다.
• reducers : action 형식을 지정해 줄 수 있다.

export const { add, plus } = store.actions; // store에서의 action중 add와 plus를 내보낸다.
export default configureStore({ reducer: store.reducer }); // createStore를 대체하는 함수이다.
// Store를 만든다는 뜻이다. 우리는 reducer를 만들었지 store를 제작하지는 않았다.

index

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import store from './Store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

storejs에서 store를 import 해준다.

//Store.js
export default configureStore({ reducer: store.reducer });

store에서 내보내기 할 때 이름을 정의하지 않았기 때문에,

index에서 import 할 때 이름을 아무렇게나 적어도 된다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import Anything from './Store';

ReactDOM.render(
  <Provider store={Anything}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Provider로 컴포넌트를 감싸서 redux를 쓴다는 것을 명시해주자.

App

//App.js
import React, { useState } from "react";

function App({store, addText, plusCount}) {
  const [text,setText] = useState('');
  
  function handleInput(e){
    setText(e.target.value);
  }
  
  function onSubmit(e){
    e.preventDefault();

    setText('');
    console.log(store);
  }
  
  function onClick(e){
  
    console.log(store);
  }

  return (
    <>
      {store.count}<button onClick={onClick}>Plus Count</button>
      <form onSubmit={onSubmit}>
        <input value={text} onChange={handleInput}/>
        <button>Submit</button>
      </form>
      {store.text}
    </>
  );
}

일단 Redux를 뺐는 기본 코드이다.

이 코드를 이해를 못하겠다면

hook이랑 form이랑 input정도 공부해야 한다.

Hooks / useState

 

html 입력받기 form input

//App.js
import React from "react";
import { connect } from "react-redux";
import {add, plus} from './Store';

function App({store, addText, plusCount}) {
  
  function onSubmit(){
    addText(text);
  }
  
  function onClick(){
    plusCount(store.count);
  }
}

function mapStateToProps(state) {
  return { store: state };
}

function mapDispatchToProps(dispatch) {
  return {
    addText: text => dispatch(add(text)),
    plusCount: () => dispatch(plus())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

위에 코드를 제거하고 순수한 redux코드는 이것이다.

 

App으로 들어오는 인자는 import로 들어온 게 아니다.

connect 함수로 redux에 연결하여,

mapStateToProps 함수에서 redux의 데이터들을 store 오브젝트에 넣었다.

function mapStateToProps(state) {
  return { store: state };
}

함수명, key값 편하게 작명해도 해도 된다.

 

 

또한

redux의 데이터를 변경시킬 함수명 또한.

mapDispatchToProps 함수에 우리가 하나씩 설정해줬고,

function mapDispatchToProps(dispatch) {
  return {
    addText: text => dispatch(add(text)),
    plusCount: () => dispatch(plus())
  };
}

이 값이 props로 들어온 거다.

 

import {add, plus} from './Store';

store에서 action(add, plus)은 가져와야 한다.

끝

이제 손에만 익으면 된다!