Redux

Redux Practice

npx create-react-application redux-practice

npm i redux react-redux

store 만들기

src > store > index.js

index.js

import { createStore } from 'redux';

const counterReducer = (state={counter: 0}, action)=>{
  if(action.type === 'increment'){
    return {
      counter: state.counter +1
    }
  }
  if(action.type === 'decrement'){
    return {
      counter: state.counter -1
    }
  }
  
  return state
}

const store = createStore(counterReducer);

export default store;

react에 redux store 제공하기

• store 이용이 필요한 부분에 제공한다.

• 하지만 프로젝트에 하나의 store만 만들수 있으니 프로젝트 전체에서 사용을 하도록 한다.

• react-redux 를 사용하여 최상에서 제공하여 전체에 store를 사용할수 있도록 한다.
  src > index.js

import React from 'react';
import ReactDOM from 'react-dom';
// 아래로 제공할 수 있도록 react-redux 사용
import { Provider } from 'react-redux';

import './index.css';
import App from './App';
import store from './store/index';

ReactDOM.render(
  // redux store 제공
  <Provider store= {store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);