Redux 세팅

client/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './reducers'

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)


ReactDOM.render(
  <Provider
    store={createStoreWithMiddleware(Reducer,
    
    //Reducer : 아래 rootreducer 참고
    
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
      // 크롬 어플리케이션 redux-devtools 다운받으면 연결됌
    )}
  >
    <App />
  </Provider>,

  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

reducer 폴더 내 index.js

import { combineReducers } from 'redux';
import user from './user_reducer';

const rootReducer = combineReducers({
    user
})

export default rootReducer;

//다른 리듀서를 추가하고 싶으면 
//리듀서를 만들고 import 해온 다음 rootReducer 안에 user, 다음에 넣으면 된다

//ex) import user from './user_reducer';
//import comment from './comment_reducer
//const rootReducer = combineReducers({
//  user, comment
//})

예제
loginpage.js

user_action.js

export function loginUser(dataToSubmit) {
//dataSubmit으로 body 값이 들어간다 
    const request = axios.post('/api/users/login', dataToSubmit)
        .then(response => response.data)
        //서버에서 받은 데이터를 request에 저장

    return { //return을 시켜서 reducer로 보낸다
        type: LOGIN_USER,
        payload: request (액션이 취해진 데이터)
    }
}

user_reducer.js

export default function (state = {}, action) {
                     //(기존 상태 state, action)
    switch (action.type) {
    //switch를 쓴 이유는 type이 여러 종류
        case LOGIN_USER:
        //리턴에서 받은 액션들로 상태변경 해줌
            return { ...state, loginSuccess: action.payload }
            //user_action에서 payload를 위 payload로 넣어준다

type.js

export const LOGIN_USER = "login_user";

redux-devtools 확인

이렇게 나오는 이유는
server 단에 로그인 api 를 보면

.json({ loginSuccess: true, userId: user._id });

라 해놨기 때문에 뜬다