[React] Redux 폴더 구조 정리하기

 

 

 

 

 

 

위의 포맷으로 정리를 해보았다.

 

 

 

💡 흐름 : components -> modules(action 생성) -> containers (dispatch, reducer, state 값 변경) -> components (UI)

 

 

 

index.js 에서 reducers 임포트 경로 수정하기

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reducers from './modules/bpp'
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'
import { createStore } from 'redux'

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

reportWebVitals();

 

 

App.js

 

import React, { Component } from 'react';
import ConnectBpp from './containers/BppContainer'

class App extends Component {
  render() {
    return (
      <div>
        <ConnectBpp />
      </div>
    );
  }
}

export default App

 

BppContainer 임포트해서 ConnectBpp 연결하기

 

 

 

components/Bpp.js

 

import React, { Component } from 'react';

class Bpp extends Component {
    render() {
        return (
            <div>
                <h1>Redux 테스트</h1>
                <h1>{this.props.result}</h1>
                <button onClick={this.props.onINC}>더하기</button>
                <button onClick={this.props.onDEC}>빼기</button>
            </div>
        );
    }
}
export default Bpp

 

 

 

modules/bpp.js

 

import { createAction, handleActions } from 'redux-actions';

const INC = 'INC'
const DEC = 'DEC'
export const inc = createAction(INC);
export const dec = createAction(DEC);

const initState = {
    num: 100
}

export default handleActions({
    [INC]: (state, action) => ({ num: state.num + 1 }),
    [DEC]: (state, action) => ({ num: state.num - 1 })
}, initState);

 

export 를 붙여서 inc 와 dec 를 밖에서 사용할 수 있도록 만들고, handleActions 앞에도 export 를 붙여서 밖에서 사용할 수 있도록 만든다.

 

 

 

 

container/BppContainer.js

 

import { useDispatch, useSelector } from 'react-redux';
import Bpp from '../components/Bpp'
import { inc, dec } from '../modules/bpp'

const BppContainer = () => {
    const num = useSelector(state => state.num)
    const dispatch = useDispatch()
    return (
        <Bpp result={num}
            onINC={() => dispatch(inc())}
            onDEC={() => dispatch(dec())}
        />
    )
}
export default BppContainer

 

import 할 때 경로 주의하기