Redux

n/a.理由

設定

npm install redux react-redux

設定

// index.js
import { Provider } from "react-redux";
import { createStore } from "redux";

let store = createStore(() => {
  return [{ id: 0, name: "GG", quantity: 2 }];
});

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

使用

// redux store 데이터를 가져와서 props로 변환해주는 함수
function state를props로(state) {
  return {
  	state: state;
  };
}

export default connect(state를props로)(Cart);

ステータスデータの変更

// index.js
let 기본state = [{id : 0, name : 'GG', quan : 2}];

function reducer(state = 기본state, 액션){
  if (액션.type === '수량증가') {    
    let copy = [...state];
    copy[0].quan++;
    return copy

  } else {
    return state
  }
  
}
// let store = createStore(reducer);
let store = createStore(combineReducers({reducer, reducer2}));


// Cart.js
<button onClick={()=>{ props.dispatch({type: '수량증가'}) }}> + </button>

function state를props화(state) {
  return {
    states : state.reducer // reducer를 2개 이상 쓰면 구분해줘야 한다.
  }
}

createStore(combineReducers({reducer1, reducer2}));

payload

props.dispatch({type : '항목추가', payload : {id : 2, name : '새로운상품', quan : 1} })

// index.js

let 기본state = [{id : 0, name : '멋진신발', quan : 2}];

function reducer(state = 기본state, 액션){

  if (액션.type === '항목추가') {
    let copy = [...state];
    copy.push(액션.payload);
    return copy;
  }
}

history.push();

history.push('/cart');