react-redux

index.js

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './modules';

const store = createStore(rootReducer);

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

serviceWorker.unregister();

App.js

import React from 'react';
import CounterContainer from './containers/CounterContainer';
import ReadonlyContainer from './containers/ReadonlyContainer';
import WriteonlyContainer from './containers/WriteonlyContainer';

import { useStore } from 'react-redux';

const App = () => {
  // 
  const store = useStore();

  return (
    <div>
      <CounterContainer />
      <hr/>
      <ReadonlyContainer />
      <hr/>
      <WriteonlyContainer />
      <hr/>
      <div>
        <button onClick={
          () => {
            store.dispatch({
              type: 'counter/INCREASE'
            })
          }
        }>스토어에 강제로 입력</button>

        {/* 갱신이 안된다. 리듀서가 작동하지 않는듯. */}
        <div>{JSON.stringify(store.getState())}</div>
      </div>
    </div>
  );
};

export default App;

 

CounterContainer.js

import React, { useCallback } from 'react';
import { connect} from 'react-redux';
import Counter from '../components/Counter';
// import { increase, decrease } from '../modules/counter';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

const CounterWrapper = ({ numberProps, increaseProps, decreaseProps}) => {
  return (
    // 뷰
    <Counter number={numberProps} onIncrease={increaseProps} onDecrease={decreaseProps}/>
  );
};

const containerMaker = connect(
  state => ({
    numberProps: state.counter.number
  }),
  dispatch => ({
    increaseProps: () => {
      console.log('increase');
      dispatch({type: INCREASE});
    },
    decreaseProps: () => {
      console.log('decrease');
      dispatch({type: DECREASE});
    }
  })
);

const CounterContainer = containerMaker(CounterWrapper);

export default CounterContainer;

 

ReadonlyContainer.js

import React, { useCallback } from 'react';
import { connect} from 'react-redux';
import Counter from '../components/Counter';
// import { increase, decrease } from '../modules/counter';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

const CounterWrapper = ({ numberProps}) => {
  return (
    // 뷰
    <div>읽기전용:{numberProps}</div>
  );
};

const containerMaker = connect(
  state => ({
    numberProps: state.counter.number
  })
);

const CounterContainer = containerMaker(CounterWrapper);

export default CounterContainer;

 

WriteonlyContainer.js

import React, { useCallback } from 'react';
import { connect} from 'react-redux';
import Counter from '../components/Counter';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

const CounterWrapper = ({ numberProps, increaseProps, decreaseProps}) => {
  return (
    // 뷰
    <div>
      쓰기전용:
      <Counter number={numberProps} onIncrease={increaseProps} onDecrease={decreaseProps}/>
    </div>
  );
};

const containerMaker = connect(
  null,
  dispatch => ({
    increaseProps: () => {
      console.log('increase');
      dispatch({type: INCREASE});
    },
    decreaseProps: () => {
      console.log('decrease');
      dispatch({type: DECREASE});
    }
  })
);

const CounterContainer = containerMaker(CounterWrapper);

export default CounterContainer;