[React][Api] createStore 번역

redux.js.org/api/createstore

createStore | Redux

Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.

앱의 전체 state tree를 보유하는 Redux store를 만듭니다. 앱에서는 하나의 store만 있어야 합니다.

 

Arguments#

1. reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.현재 state tree와 처리할 action이 주어지면 다음 state tree를 반환하는 reducing function 입니다.

2. [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.초기 상태.  범용 apps의 서버로 부터 state를 수화하거나 이전에 직렬화된 유저 session을 복원하기 위해 선택적으로 지정할 수 있습니다. combineReducers를 사용하여 reducer를 생성한 경우 전달된 keys와 동일한 모양의 객체여야 합니다.

3. [enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().store 개선장치.  middleware, time travel, persistence, etc와 같이 third-party기능을 사용하여 store를 향상시키기 위해서는 선택적으로 지정할 수 있습니다. Redux와 함께 제공되는 유일한 store 향상기는 applyMiddleware() 입니다.

Returns#

(Store): An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.

(Store): 앱의 전체 state를 보유한 객체. state를 변경하기 위한 유일한 방법은 dispatching actions. 이다. UI를 업데이트 하기위해 state 변경을 subscribe 할 수도 있습니다.

 

Example

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

Tips#

• Don't create more than one store in an application! Instead, use combineReducers to create a single root reducer out of many.

• application의 store를 한개이상 만들지 마세요. 대신의 combineReducers 를 사용하여 하나의 root reducer를 만드세요.

• It is up to you to choose the state format. You can use plain objects or something like Immutable. If you're not sure, start with plain objects.

• state format을 선택하는 것은 당신에게 달려 있습니다. 일반 객체 또는 Immutable같은 것을 사용할 수 있습니다.  확실하지 않은 경우 일반객체로 시작하세요.  

• If your state is a plain object, make sure you never mutate it! For example, instead of returning something like Object.assign(state, newData) from your reducers, return Object.assign({}, state, newData). This way you don't override the previous state. You can also write return { ...state, ...newData } if you enable the object spread operator proposal.

• state가 일반 객체인 경우 절대 변경하지 마세요. 예를 들어 Object.assign(state, newDate) 대신 Object.assign({}, state, newdata)를 반환 합니다. 이 방법은 이전 state를 override하지 않습니다. object spread operator proposal을활성화 하면 return {...state, ...newDate}를 작성할 수도 있습니다.

• For universal apps that run on the server, create a store instance with every request so that they are isolated. Dispatch a few data fetching actions to a store instance and wait for them to complete before rendering the app on the server.

• 서버에서 실행되는 범용 apps의 경우 모든 요청의 store 인스턴스를 만들어 격리 되도록 합니다. 몇가지 데이터 fetching actions를 store 인스턴스의 전달하고 서버 apps 랜더링전의 완료될 때까지 기다립니다.

• When a store is created, Redux dispatches a dummy action to your reducer to populate the store with the initial state. You are not meant to handle the dummy action directly. Just remember that your reducer should return some kind of initial state if the state given to it as the first argument is undefined, and you're all set.

• store 가 만들어 지면 Redux는 초기 state로 store를 채우기 위해 dummy action을 reducer로 전달 합니다. 더미 액션을 직접 처리할 수 없습니다. 첫번 째 매개변수로 전달된 state가 정의 되지 않았고 모든 것을 설정한 경우 reducer는 초기 state의 some kind?를 반환해야 하는 것을 기억하세요.

• To apply multiple store enhancers, you may use compose().여러개의 store 향상기를 적용하기 위해서 compose()를 사용할 수 있습니다.

compose()