[Redux] React Redux

react-router-dom 버전 6부터라면

Route를 Routes로 감싸줘야 한다

Router > Routes > Route

 

component 속성이 없어졌다

대신 element 속성 사용

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/:id" element={<Detail />} />
  </Routes>
</Router>

 

 

store은 변경사항을 우리에게 알려줬었다

어떤 변화가 일어났을  우리 애플리케이션을 다시 render 하고 싶다면

 

 

Provider

React Redux에는 Provider 컴포넌트를 통해 다른 컴포넌트에서 Redux store를 사용할 수 있다

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

index에 연결

 

 

connect

connect는 컴포넌트들을 store에 연결시켜 준다

두 개의 인자 state나 dispatch를 가지고 둘 중에 고를 수 있다

getState는 state를 전달해 주고 dispatch는 store 혹은 reducer에 메시지를 전달해 준다

function mapStateToProps(state) {
  return { toDos: state };
}

export default connect(mapStateToProps)(Home);

↑ store로부터 state 가져오기

 

mapStateToProps는 state와 컴포넌트의 props와 함께 호출된다

state, ourProps

 

connect()는 컴포넌트로 보내는 props에 추가될 수 있도록 허용해 준다

함수 안에서 어떤 걸 return해도 컴포넌트의 prop에 추가될 것이다

 

함수의 이름은 mapStateToProps여야 한다

Redux state로부터 컴포넌트에 prop으로써 전달한다는 것

<ul>
  {JSON.stringify(toDos)}
</ul>

 

 

mapDispatchToProps는 dispatch와 props와 함께 호출된다

function mapDispatchToProps(dispatch) {
  return {
    addToDo: (text) => dispatch(actionCreators.addToDo(text)),
  };
}

function onSubmit(e) {
    e.preventDefault();
    addToDo(text);
    setText("");
  }

 

 

find()는 testing function에 만족하는 첫 번째 요소를 반환한다

function mapStateToProps(state, ownProps) {
  const {
    match: {
      params: { id }
    }
  } = ownProps;
  return { toDo: state.find(toDo => toDo.id === parseInt(id)) };
}