React 초보자가 시작하는 Redux 입문

Redux란?

state를 쉽게 관리하기 위한 프레임워크.
React는 부모 구성 요소에서 하위 구성 요소로 props를 통해 데이터를 전달합니다.
그렇다면 부모와 자식 관계가없는 구성 요소간에 상태를 전달하는 것이 매우 어렵습니다.
→ 맨 위의 컴퍼넌트에 모든 state를 관리해, 그것을 아이 컴퍼넌트에 순차적으로 전해 간다.



설명에 관해서는, 이하의 URL의 기사가 가장 알기 쉽다.
htps : // 이 m / 온 312 / ms / 49 1f03445b19cf407b7

Kindle unlimited에 들어있는 사람은 아래의 책도 참조.
https://www.amazon.co.jp/React-Redux%E5%85%A5%E9%96%80-React%E3%81%AF%E3%81%A7%E3%81%8D%E3% 82%8B%E3%81%91%E3%81%A9Redux%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%89%E3%81%AA%E3%81% 84%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84%E4%BA%BA%E3%81%AE% E3%81%9F%E3%82%81%E3%81%AEreact-redux%E5%85%A5%E9%96%80-%E4%B8%AD%E9%87%8E-%E4%BB% 81-ebook/dp/B07DLRSV8V/ref=sr_1_7?s=digital-text&ie=UTF8&qid=1552718161&sr=1-7&keywords=react

根本的に、「変化」と「非同期」を"同時"にコントロールするのは人間には無理がある。
Reactはその問題に対してViewレイヤーで非同期と直接DOM操作を取り除くことで解決したけども、
state(状態)の管理は開発者に委ねられたままなので、Reduxはそこを解決するためにある。

원래 state란?

변수 같은 사람 (브리본의 감각입니다.)
「상태를 관리하는 State」라고 하는 표현으로 설명되지만, 정직하게 잘 모른다.
우선, 변수라든지 데이터라고 하는 인식으로(rails로 말하는 model로부터 컬럼을 당겨 오는 것).
해당 구성 요소 내에서만 사용할 수 있습니다.
구성 요소 외부에서 상태를 변경할 수 없습니다.

Redux의 흐름

1 유저의 입력으로부터 action 를 작성한다
2 작성된 actoin을 store에 dispatch
3action과 state를 바탕으로 reducer가 새로운 state로 변경
→ action과 state를 reducer에 전달하고 새로운 state를 생성합니다.
4 새로 만든 state를 store에 저장
→ reducer가 새로운 state를 작성하고 store에 저장

Redux에 필요한 지식(부→브리본, 공→공식)

・state
상기 참고.

· Action
부 : store에 dispatch를 통해 부딪히는 것.
공공 : 어플리케이션으로부터의 정보를 store에 보내기 위한 오브젝트.
store.dispatch()로 store에 보내진다.
부: store.js로 쓰는 것은 actionCreator.
그 actionCreator로부터 개념적인 action 되는 것이 작성되어 dispatch에 의해 store에 보내진다.

・Reducer
부:store에 dispatch된 action과 store내의 state로부터 새로운 state를 생성해 주는 녀석.
공공 : state를 변경해주는 것. action 과 state 로부터, 새로운 state 를 작성해 돌려주는 메소드입니다.

禁止事項
・引数のstate, actionインスタンスの値を変更する
・副作用をおこす(APIを呼んだり、ルーティングを変えるなどなど)
・毎回値が変わるもの(Date.now() や Math.random())を扱う

・Store
부: React의 각 컴포넌트에서 데이터(state)를 교환하기 위한 것. rails에서 말하는 모델이라고 할까 데이터베이스와 같은 것. 응용 프로그램에서 하나만 존재.

Storesの役割は、
・stateを保持する
・stateへアクセスするためのgetState()を提供する
・stateを更新するためのdispatch(action)を提供する
・リスナーを登録するためのsubscribe(listener)を提供する

・순수 함수(pure function)
부: 무엇이 순수하거나 비순수인지 잘 모르겠어요. 고등학생?

不明点
・子reducerの返したstateを親reducerがまとめて一つのツリー状のstateを返す
→「ツリー状のstate」とは？

구현

github 코드 : htps : // 기주 b. 코 m / 류 b / 레즈 x - 아 p

git cloneをする
redux-appのレポジトリにcdする
yarn install
yarn start
↑これで動きます

아래 준비

npm react-create-app [모든 앱 이름]
→ react에서 프로젝트 (응용 프로그램)를 시작하는 명령
react add redux react-redux
→redux와 react-redux라는 두 개의 패키지가 필요

reducer

import { combineReducers } from 'redux';

export function todos(state={
  list: {}
}, action) {
  switch(action.type) {
    case "ADD_TO_DO":
      // Object.assignの動きは良く分からないので、とりあえずstateを生成していると思っていてください。
      return Object.assign({}, state, {
        list: state.list.concat(action.todo)
      });
    case "REMOVE_TO_DO":
      return Object.assign({}, state, {
        list: state.list.filter(todo => {
          if(action.todo != todo) {
            return true;
          } else {
            return false;
          }
        })
      });
      default: 
      return state;
  }
}

export default combineReducers({
  todos,
});

액션

export function addToDo(todo) {
  return {
    type: 'ADD_TO_DO',
    todo
  }
}

export function removeToDo(todo) {
  return {
    type: 'REMOVE_TO_DO',
    todo
  }
}

store

import { createStore } from 'redux';
import reducers from "./reducers";

const store = createStore(reducers);

export default store;

index.js (index.html에 바인딩?하는 큰 파일)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './stores';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js (실제로 구현하는 파일)

import React, { Component } from 'react';
import { connect } from "react-redux";
import { addToDo, removeToDo } from './actions';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super();
    this.state = {
      input: ""
    };
  }
  render() {
    return (
      <div className="App">
        {/* <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header> */}
        <ul>
          {this.props.todos.map(todo => {
            return (
              <li key={todo}>
                <span>{todo}</span>
                <button onClick={() => this.props.onRemoveToDo(todo)}>削除</button>
              </li>
            )
          })}
        </ul>
        <input type="text" onChange={e => this.setState({input: e.target.value})} />
        <button onClick={() => this.props.onAddToDo(this.state.input)}>
          追加
        </button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onAddToDo(todo) {
      dispatch(addToDo(todo))
    },
    onRemoveToDo(todo) {
      dispatch(removeToDo(todo))
    }
  }
};

// これを記述することで、this.props.dispatchが使える？
const mapStateToProps = state => {
  return {
    todos: state.todos.list
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);