리덕스

리덕스 

 

 

리덕스 세팅 

1.  npm install redux react-redux

1. redux 폴더 만들고 redux폴던안에 config폴더랑 modules 폴더 만들기 , 폴더를 만들었으면 config 안에 configStore.js 만들고 modules 안에 우리가 사용할 state 들을 작성한다 . configStore는 state들을 컴포넌트에 연결시켜주는 역할을 한다 . 

 

3.configStore 초기세팅 

 

-creatStore() 만들기 

 

const store = createStore(rootReducer);

-리듀서 만들기

const rootReducer = combineReducers({

//이곳은 state 들을 연결시켜주는 곳 입니다.

// ex) counter , accout

});

 

만든 리듀서를 creatStore()인자로 넣어주기 !

store는 리듀서를 필요로 한다 !

가지고온 state 들은 꼭 import 해주자!

 

마지막으로 export default store 해주기

 

1. moudles 세팅법

• Action Value 만들기

Ex)const DEPOSIT_DOLLAR = " DEPOSIT_DOLAR";

const WITHDRAW_DOLLAR = "WITHDRAW_DOLAR”;

 

-Action creator 액션 만들기

export const depositDollar = (payload) => {

return {

type: DEPOSIT_DOLLAR,

payload,

};

};

• 초기값 설정 이니셜 스테이트로 준다

-const initialState = {

balance: 0,

}

 

-Reducer 만들기 !!!!!!!!!!!!!!!

 

const account = (state = initialState, action) => {

switch (action.type) {

//입금 : payload로 받아온 값 만큼을 더해줌

case DEPOSIT_DOLLAR: {

return {

balance: state.balance + action.payload,

};

}

//출금 : payload로 받아온 값 만큼을 뺴줌

case WITHDRAW_DOLLAR: {

return {

balance: state.balance - action.payload,

};

}

default:

return state;

}

};

 

===========================

마지막  익스포트 디폴트해주기 !

export default account;