Reactはreduxを用いて簡単にデータを追加する機能を実現する

redux
reduxもアーキテクチャ思考であり、このアーキテクチャ思考ではReactがビューVとして機能する
redux使用プロセス(todolist–データを1つ追加)

reduxはアーキテクチャ思考であり、redux

というツールが必要です.

取り付けredux $ yarn add redux

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 

storeの下にstate

を新規作成

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

storeの下にreducer

を新規作成

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

  export default reducer 

使用したいコンポーネントでstore

を直接参照します.

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

    import store from '../store'

    class Content extends Component{

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

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

    }

    export default Content 

ユーザーインタラクティブReact component->actionCreators

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

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 

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 

は、データ個の更新を行い、storeのサブスクリプション機能により更新を行う.すなわち、コンポーネントは、データ

を再付与する必要がある.

Contentコンポーネントでの購読

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

14.ページレンダリング

   const Item = ( props ) => {
       return <li> {props.task} </li>
   }

   renderItem = () => {
           return this.state.todos.map( item => {
               return <Item {...item} key = {item.id}></Item>
           })
       }

       <ul>
                     { this.renderItem() }
       </ul>