대망의 리덕스!

액션!

상태에 어떠한 변화가 필요 할 때 액션이라는 것을 발생 

하나의 객체로 액션을 형성하고 있다!

ex)

{

  type: "TOGGLE_VALUE"

}

무조건 객체 안에 type필드를 필수적으로 가지고 있어야 하고 그 외의 값들은 개발자 마음대로 넣을 수 있다.

 

ex)

{

type: "ADD_TODO",

data : {

  id: 0,

text: "리덕스 배우기"

}

}

 

액션 생성함수!!

액션 생성함수는 액션을 만드는 함수, 단순히 파라미터(액션)을 받아와서 액션 객체 형태로 만들어 줌

export const changeInput = text => ({type: "CHANGE_INPUT",

text

});

이러한 액션 생성함수를 만드는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키 위해서

그래서 보통 함수 앞에 export 키워드를 이용해 다른 파일에서 불러옴

리덕스 사용 할 때 액션 생성함수를 사용하는 것은 필 수는 아니다. 액션을 발생 시킬 때마다 직접 액션 객체를 생성할 수 있다.

 

리듀서

변화를 일으키는 함수 , 리듀서는 두 개의 파라미터를 가지고 오는데 첫번째 파라미터에는 state 즉 현재의 상태를 받아오고

두 번째 파라미터에서는 전달받은 액션을 참고하여 새로운 상태 반환

useRedcuer를 사용할 때 작성하는 리듀서와 비슷한 형태

function counter(state, action) {

switch (action.type) {

case 'INCREASE': return state + 1;

case 'DECREASE': return state - 1;

default: return state; } }

 

스토어

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됨 , 스토어 안에는, 현재의 앱 상태와 리듀서와 추가적인 내장 함수가 들어감

 

초기화

const initialState = {

counter : 1

 

}

리듀서 함수의 state는 초기화를 해야하므로 initialState라는 변수에 액션 생수 함수들의 값들을 초기화 시킨다

 

스토어

 const stroe =createStore(reducer)

 

ducks패턴

파일에 모든 코드를 넣는 것

액션, 액션 생성 함수, reducer 생성

 

import { combineReducers } from "redux";

import counter from "./redux/Counter";

import todos from "./redux/ADD_TODO";

 

const rootReducer = combineReducers({

counter,

todos

})

 

export default rootReducer;

 

 

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import {Provider} from 'react-redux';

import {createStore} from 'redux';

import rootReducer from './modules';

 

cnst store = createStore(rootReducer);

ReactDOM.render(

<Provider store={store}>

<App />

</Provider>,

document.getElementById('root')

);

index.js

 

리덕스 개발자 도구

npm add redux-devtools-extension