React------reduxのインストールおよび基本的な使用手順(ケース付き)

redux
reduxもアーキテクチャ思考であり、このアーキテクチャ思考ではReactがビューVとして機能する
redux使用プロセス(todolist–データを1つ追加)
1.reduxはアーキテクチャ思考であり、reduxと呼ばれるツールが必要です.2.reduxをインストールします.

$ yarn add redux

3.srcの下にstoreを新規作成し、storeにindex.jsを新規作成してstoreを作成する

  import { createStore } from 'redux'
  import reducer from './reducer'

  const store = createStore( reducer ) //   new   createStore()        Object     Function

  export default store 

4.storeの下にstateを新規作成する

  const state = {
    todos: [
      {
        id: 1,
        task: '   '
      }
    ]
  }
  export default state

5.storeの下にreducerを新規作成する

  import state from './state'
  const reducer = ( previousState = state , action ) => {
    const newState = {
      ...previousState           //             ，    newState，    state
    }
    return newState
  }

  export default reducer 

6.使用したいコンポーネントでstoreを直接参照

    import React, { Component,Fragment } from 'react'

    import store from '../store'

    class Content extends Component{

      constructor () {
        super()
        this.state = {
          todos: store.getState()
        }
      }

      render () {
        return (
          <Fragment>
            <div>
              <ul>
                <li> 1 </li>
              </ul>
            </div>
          </Fragment>
        )
      }

    }

    export default Content 

7.ユーザー対話の実行-->actionCreators
8.storeでactionCreators.jsを新規作成

import * as type from './type'
import store from './index'

const actionCreators = {
  add_todos_item ( val ) {
    //     

    const action = {
      type: type.ADD_TODOS_ITEM,
      payload: val //     
    }

    //      
    store.dispatch( action )
  }
}


export default actionCreators

9.ButtonコンポーネントでactionCreatorsをトリガーする方法

    import React, { Component,Fragment } from 'react'
    import actionCreators from './../store/actionCreators';

    class Button extends Component{

      add = () => {
        let val = this.input.value
        actionCreators.add_todos_item( val )
        this.input.value = ''
      }

      render () {
        return (
          <Fragment>
            <div>
              <input type = "text" ref = { el => this.input = el } />
              <br/>
              <button onClick = { this.add }> + </button>
            </div>
          </Fragment>
        )
      }

    }

    export default Button 

10.reducerでのデータの変更

  import state from './state'

  // const state = require( './state' )

  import * as type from './type'

  const reducer = ( previousState = state,action) => {
    let newState = {
      ...previousState
    }

    //              ，     

    switch ( action.type ) {
      case type.ADD_TODOS_ITEM:

        //     
        newState.todos.push({
          id: newState.todos.length + 1,
          task: action.payload
        })
        
        break;
    
      default:
        break;
    }

  
    

    return newState
  }


  export default reducer 

11.データ個の更新を行い、storeのサブスクリプション機能により更新を行う.すなわち、コンポーネントはデータを再付与する必要がある
12.Contentコンポーネントでの購読

 componentDidMount () {
   store.subscribe( () => {
     this.setState({
       todos: store.getState().todos
     })
   })
 }