React-Redux

React-Redux

• React component에서 상태를 직접 관리하지 않고 Redux에서 관리하기 위해 사용한다.

Install

npm install react-redux

Learn React-Redux

• Js에서도 가능하겠지만 React를 Component, page 또는 특정 기능 별로 따로 folder를 만들어서 관리한다. react-redux에서도 store와 action을 따로 만들어 명확하게 기능을 분류하여 관리한다.

Store.js

import { createStore } from "redux";
import reducer from "./action.js";

const store = createStore(reducer);

export default store;

index.js

• Provider : react-redux 기능, Provider를 통해 store를 React 전체에서 가져올 수 있다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import store from "./store";

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

action.js

const ACTION = "ACTION";
const ANOTHER_ACTION = "ANOTHER_ACTION";

const reducer = (state, action) => {
  switch(action.type){
    case ACTION:
      return newState;
    case ANOTHER_ACTION:
      return newState;
    default:
      return state;
  }
}

const action = (data) => {
  return {
    type: ACTION,
    data
  }
}

const anotherAction = (data) => {
  return {
    type: ANOTHER_ACTION,
    data
  }
}

export const actionCreators = {
  action, anotherAction 
}

export default reducer;

• 웹의 규모가 클수록 Reducer를 나누어 구현해야 하는 경우가 발생할 수 있는데 combineReducer({})를 사용하여 createStore에 하나의 reducer로 전달할 수 있다.

• Redux toolkit에서 createReducer를 사용할 수 있는데 첫번째 인자로 initial state를 두번째 인자로 action객체를 전달할 수 있다.

import {createReducer} from "@reduxjs/toolkit";

const action = createAction("ACTIOIN");
const anotherAction = createAction("ANOTHER_ACTION");

const reducer = createReducr([], {
  [action]: (state, action) => {
    state.data = action.payload
    return state;
  },
  [anotherAction]: (state, action) => {
    // do someting with action.payload
    return state;
  }
})

• createReducer를 사용하면 state 또는 새로운 상태의 state를 반환해야 한다.

• 기존 Redux에서는 기존 상태 값을 변형하지 않고 상태를 복사해 반환해야 했지만 createReducer를 사용하면 상태를 변형이 가능하게 해주는데 이는 code의 표면적으로는 상태를 직접 변형하는 것처럼 구현하지만 상태를 직접 변형하는 것이 아닌 immer를 통해서 Redux toolkit이 대신 변형된 새로운 상태를 반환해 주는것이라고 한다.

• @reduxjs/toolkit의 createSlice는 Reducer와 Action을 한번에 구현할 수 있다.

import {createStore} from "redux"
import {createSlice} from "@reduxjs/toolkit";

const handleState = createSlice({
  name: "reducer",
  initialState: "",
  reducers: {
    type: (state, action) => {
      state.data = action.playload;
    },
    anotherType: (state, action) => {
      // do something with state and action
    }
  }
})

const store = createStore(handleState.reducer);

const { type, anotherType } = handleState.actions;

import {combineReducer} from "redux";

// reducers

export default combineReducers({
  reducer,
  anotherReducer
})

• redux에는 action 관리를 위한 redux-actions가 있다.
  • npm install redux-actions
    또는
  • npm install @reduxjs/toolkit

import { handleActions } from "redux-actions";

const ACTION_TYPE = "ACTION";
const ANOTHER_TYPE = "ANOTHER_ACTION";

const actions = createAction(TYPE);

const anotherActions = createAction(TYPE);

// 또는 

const actions = state => dispatch => {
  dispatch({ type: ACTION_TYPE, state }) 
}

const anotherActions = state => dispatch => {
  dispatch({ type: ANOTHER_TYPE, state }) 
}

const initialState;

const reducer = handleActions({
  [ACTION_TYPE]: (state, action) => {
     return {
       ...state, 
       payload: action
     }
  },
  [ANOTHER_TYPE]: (state, action) => {
     return {
       ...state,
       payload: action
     }
  }
  
}, initialState )

export default reducer;

• redux toolkit의 createAction을 사용하여 action을 구현할 경우 reducer의 action 내 payload로 상태 값에 접근할 수 있다.
• handleActions가 반환하는 객체의 payload는 이름을 바꾸어 반환이 가능하다.

dispatch

import React from "react";
import { connect } from "react-redux";
import action from "./action.js"

function App({oldstate, key}) {
  return 
    <>
    </>
}

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

function mapDispatchToProps(dispatch, props) {
  return { 
    key: dispatch(action(props)),
    
    // 또는 
    
    key: (data) => dispatch(action(data))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ToDo)

• mapStateToProps(state) : redux store의 getState()와 비슷한 기능, store에 있는 상태 값을 React component의 props로 전달한다.

• mapDispatchToProps(dispatch, props) : dispatch와 connect된 react component의 props를 전달받아 접근할 수 있다. dispatch는 action을 react component에 props로 전달할 수 있다.

Redux with Hooks

import { useSelector, useDispatch } from "react-redux"

function App() {
  const getState = useSelector(store => store.payload.state)
  
  const dispatch = useDispatch();
  
  dispatch(actions);
}

• mapStateToProps와 mapDispatchToProps를 사용하지 않고 react-redux의 useSelector와 useDispatch를 사용하여 기능을 대신할 수 있고 props로 전달 받는 것보다 직접적으로 store의 state에 접근할 수 있다.

Reference

https://react-redux.js.org/