220221 pure redux 코드 예제

1. 터미널에서 mkdir로 새 폴더 생성
2. 폴더에 진입하여 npm init으로 package.json파일 만들기
3. npm install redux
4. vs code에 index.js파일 만들기


const { createStore } = require('redux');

// 초기 state를 정의한다
const initState = {
  name: 'Haley',
  posts: []
}

// action은 객체
// action creator 함수를 만들어서
// action 객체를 리턴하는 코드를 작성한다
const changeUsername = (data) => {
  return { // acation
    type: 'CHANGE_NAME',
    data
  }
}

const addPost = (post) => {
  return {
    type: 'ADD_POST',
    post
  }
}

// reducer
// 어떤 action 타입이 들어오는 지에 따라
// 새로운 state를 생성하는 순수함수
const reducer = (prevState, action) => {
  switch(action.type) {
    case 'CHANGE_NAME':
      return {
        ...prevState,
        name: action.data
      }
    case 'ADD_POST':
      return {
        ...prevState,
        posts: [prevState.posts, action.post]
      }
    default:
      return prevState
  }
}

// store
const store = createStore(reducer, initState);
console.log(ster.getState());

// dispatch로 action 전달
store.dispatch(changeUsername('Emily'));
console.log(store.getState());

store.dispatch(addPost('add New Post'));
console.log(store.getState());


// getState()
// Store의 메소드 중 하나
// 애플리케이션의 현재 상태 트리를 반환한다 
// 스토어의 리듀서가 마지막으로 반환한 값과 동일하다

 

redux