redux

redux는 상태 관리 라이브러리다

Redux is a predictable state container for javascript apps

 

props 와 state

 

props는 properties의 줄임말

부모 컴포넌트가 있으면 자식 컴포넌트가 들어갈 수 있는데 그럴 때 props 를 이용한다

그리고 위에서 아래로 부모 컴포넌트에서 자식 컴포넌트로 이렇게만 보낼 수가 있다.

또 부모 컴포넌트에서 자식 컴포넌트에게 1이라는 데이터를 줬다고 하면

자식 컴포넌트에서는 1이라는 데이터를 바꿀 수 없다.

 

그래서 부모에서 변경한다음 다시 자식에게 보내야함

<chatMessages
	message={message}
    currentMember={member}
/>

 

state

부모 컴포넌트에서 자식 컴포넌트에게 데이터를 보내는 게 아니고

그 컴포넌트 안에서 데이터를 바꿀 수 있다.

데이터가 바뀔 때 재 렌더링 된다.

state = {
	message: '',
    attachFile: undenfined,
    openMenu: false,
}

 

redux는 state를 관리하는 것

 

redux의 데이터 flow(strict unidirectional data flow) 한방향으로만 흐른다 의미

react component -> dispactch(action) -> action -> reducer -> store -> subscribe -> react component

 

Action -> a plain object describing what happend. 어떤 일이 일어났는지 설명하는 객체

//action object
{type: 'Like_ARTICLE', articleId: 42}
{type: 'FETCH_USER_SUCCESS', response: {id: 3, name: 'Mary'}}
{type: 'ADD_TODO', text: 'Read the Redux docs.'}

articleId 42번을 좋아요를 했다  

아이디가 3이고 이름이 메리인 유저를 가져오는데 성공했다

'Read the Redux docs' 텍스트를 TODO에 추가했다.

 

Reducer -> 액션을 함으로 인해서 3이었던 state가 4로 변했다. 이런 것을 설명해주는 것이 Reducer

state의 변화를 설명(?)

이전 state와 action object를 받은 후에 next state를 return한다.

 

store은 어플리케이션의 state를 감싸주는 역할

 

redux 이용하기

다운로드

redux

react-redux

redux-promise

redux-thunk

npm install redux react-redux redux-promise redux-thunk --save

 

//client의 index.js
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddlware from 'redux-promise';
import ReduxThunk from 'redux-thunk';

const createStoreWithMiddelware = applyMiddleware(promiseMiddlware, ReduxThunk)(createStore)


ReactDOM.render(
  <Provider store={createStoreWithMiddelware(Reducer,
    window._REDUX_DEVTOOLS_EXTENSION__ &&
    window._REDUX_DEVTOOLS_EXTENSION__()
  )}>
    <App />
  </Provider>,
  document.getElementById('root')
);


//reducer 파일의 index.js
import { combineReducers } from "redux";
//import user from './user_reducer';

const rootReducer = combineReducers({
    //user
})

export default rootReducer;

그냥 store는 promise와 function을 받을 수 없기 때문에 reduxthnuk와 promiseMiddlwar를 사용함

reducer들이 여러가지가 있을 수 있기 때문에 combineReducers 를 이용해 하나로 합쳐준다.

 

redux extension - redux devtool 이거를 이용해서 redux를 조금 편하게 사용할 수 있다 설치해야함

Redux DevTools