이 기사에서 쓰기

Udemy의 React, Redux 강좌의 기초편을 배우고 있어, 정말로 Redux가 다소 어렵기 때문에 일단 기초의 기초를 정리했습니다.
환경 구축의 근처나 세세한 용어의 설명이나 조사는 생략해, 최소한으로 코드의 흐름을 정리한 것만의 기사입니다.
거의 머리의 정리 때문에이므로 여러 가지 인식이 다를 수 있습니다. . w.

최소한 알아야 할 props, state에 대해서는 여기 가 알기 쉬웠습니다.
+와 - 버튼으로 숫자가 늘어나고 줄어든다는 처리를 쓰고 있습니다.

흐름

【1】 우선, 액션의 타입을 쓴다. increment 또는 decrement? 이것을 Reducer에 건네준다.

action/index.js

//あとでレデューサーでも使うので、constしておく。
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

//それぞれをアクションクリエイターとよぶよ
export const increment = () => ({
        type:INCREMENT
})

export const decrement = () => ({
        type:DECREMENT
})

【2】액션으로부터 Reducer에 INCREMENT, DECREMENT를 건네주고, type에 의해 state를 돌려준다.

reducers/count.js

import { INCREMENT,DECREMENT } from '../actions'

//初期状態のオブジェクトを入れる変数名をinitialStateとする。
const initialState = { value:0 }//初期のカウント

//関数として定義。引数はstate、acitonとして２つ持つ
export default(state =initialState, action) => {
    //actionのtype（INCREMENTかDECREMENTか）はaction.typeという処理で拾える
    switch(action.type){
        case INCREMENT://INCREMENTを拾った場合は値をプラス1する。
            return { value:state.value + 1}
        case DECREMENT://同様に、DECREMENTの場合はマイナス。
            return { value:state.value - 1}
        default: //初期状態は0のまま
            return state
    }
}

【3】count.js를 같은 Reducer 안의 index.js에 건네주어,combineReducers로 정리한다(이번은 1개이지만, 복수의 reducers를 정리하는데 좋다)

reducers/index.js

//すべてのreducsersをここでまとめてしまうcombineReducers を取り込む。
import { combineReducers } from 'redux'
//count.jsから取得
import count from './count'

//storeで使うので、Reducerで決めた数値をエクスポートする。
export default combineReducers({ count })
//なお、今回は受け渡す値は「count」一つだが
//いろいろな状態を管理したい場合は
//export default combineReducers({ foo,bar,baz }) みたいな感じ

【4】Reducser에서 Component/App.js로. 여기서 connect 함수를 사용하여

component/App.js

import React, { Component } from 'react';
//コネクト関数を追加
import { connect } from 'react-redux'
import { increment, decrement } from '../actions'


class App extends Component {
  //counterには、レデューサーのカウンター内のオブジェクトの値の値を渡す。propsで受け取ってる。
  render(){
    const props = this.props
      return(
      <React.Fragment>
        <div>counter:{props.value}</div>
        <button onClick={props.increment}> +1</button>
        <button onClick={props.decrement}> -1</button>
      </React.Fragment>
    )
  }
}

//mapStateToPropsは、stateの情報から、componentに必要な情報を受け渡す
const mapStateToProps = state => ({ value:state.count.value})
//アクションが実行された時に、該当のアクションを渡し、状態遷移をさせるのがディスパッチ
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})
//connect関数でstoreと描写側がつながるらしい。
export default connect(mapStateToProps,mapDispatchToProps)(App)

【5】 이것들을 정리하는 톱에 있는 파일이 이것.

index.js

import React from "react";
import ReactDOM from 'react-dom';
//createStoreはstoreを利用するためのもの
import { createStore } from 'redux'
//Providerはすべての環境でstoreを使うためのもの
import { Provider } from 'react-redux'
import './index.css';
import reducer from './reducers';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

//ここで作られるstoreはアプリ内の唯一のものになる
const store = createStore(reducer)

//既存のコンポーネントを、providerコンポートネントで囲み、store属性に、
//上のconstしたstoreを当てはめる。これで、バケツリレーをせずにproviderが使える
//この中の<App />が【4】でrenderされてるもの。
ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>,
 document.getElementById('root')
);

registerServiceWorker();//?

실제 표시. ※【4】로 render 되고 있는 컨텐츠만!

+1과 -1을 클릭하면 숫자가 늘어납니다.

어려움

쓰기 시작했을 때는 흐름에 따라 쓰면 정리할 수 있을 것 같다! 라고 생각했지만, 정리해 보면 전혀 1개의 흐름이라고 하는 것은 아니다. 그리고 별로 잘 모르겠습니다. . w

어쨌든,
action, action creator로 액션 만들기
뷰측의 클릭 등으로 그 액션을 디스패치 한다.
리듀서로 그 액션을 바탕으로 실제로 state(값)를 바꾼다.
하면 뷰측이 바뀐다는 정도는 알았습니다! 정말 알고 있을까 이것!

qiita에서도 여러가지 있었으므로, 좀 더 정리하기 위해 여러가지 기사 읽어 보려고 생각합니다. .
외부 사이트입니다만 이것도 그림이 되어 알기 쉬웠다.

그건 그렇고

이것을하고 있습니다! 아직 기초편을 배웠을 뿐이므로 이곳에서 했어요!
프론트엔드 엔지니어를 위한 React·Redux 실천 입문
htps //w w. 우데 my. 코 m / 이렇게 r세 / 레아 ct- 아 p- 카치 온 - ゔ ぇ p 맨 t /
덧붙여서, git도 push와 clone, commit 정도밖에 하지 않았다(게다가 Source tree) 때문에 굉장히 연습이 되고 있습니다, ,,w