사용이유

redux 를 사용하는 이유는 컴포넌트안의 컴포넌트 복잡한 구조에 의해 props 전송이 복잡해지고 귀찮아졌다.
그래서 원하는곳에 모든 컴포넌트 들이 같은 state를 공유할 수 있게 redux가 생겨났따.

사용방법

index.js

두 줄 import를 해주고

import { Provider } from 'react-redux'
import { createStore } from "redux";

createStore 를 사용하여 store 의 데이터 값을 세팅

  
let store = createStore( () => {
  return [
    {
      id: 0, name: '멋진인생', quan: 2
    },
  ]
} )

  `Provider`로 App 컴포넌트 위에 감싸게 되면 같은 전역 state를 사용할 수 있기 때문
    

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById( "root" )
);

Cart.js

import { connect } from 'react-redux'

state를 props 화 시키기 위해 Cart 함수에 props 넣어준다.

function Cart( props ) {

  return (
    <div></div>
  )
}

export 할때 함수 statePropsChange 의 store안에 있는 데이터를 state로 받아서 state 의 값을 설정

function statePropsChange( state ) {

  return {
    state: state
  }

}

export 해줄 때 connect 안에 함수명 (부모 function) 을 설정하여 내보낸다.

export default connect( statePropsChange )( Cart )

결과

index.js

Cart.js

reduce 가 여러개일때!

store에 있는 상태를 여러개 추가가 될 것이다.
그럴때는 다른식으로 선언을 해야 한다.

index.js

let isAlert = true;
function reducer2( state = isAlert, action ) {
  if ( action.type === 'close' ) {
    return false
  } else {
    return state
  }
}

기존처럼 reducer2 로 선언을 해 주고

state = isAlert
기본 파라미터 문법 값을 입력하지 않으면 resetData를 추가한다. es6 (데이터 초기값)

 let store = createStore( combineReducers( { reducer, reducer2 } ) )

createStore 로 선언한 변수들을 object 형식으로 넘겨준다

Cart.js

두개를 createStore 로 넘겨 주었을때 console.log 찍어보면
선언한 변수가 나온다.

그래서 하단에 export 하는 방법도 바뀌어야 한다.

function statePropsChange( state ) {
  return {
    state: state.reducer,
    isAlert: state.reducer2,
  }
}

결과