react-redux最適化簡単なtodolist

react-redux最適化簡単なtodolist
reduxをより上手にするために、私たちは前にreduxで実現したtodolistを作って、それでは簡単にその中の煩雑さを感じることができて、開発の煩雑さを解決するために、迅速な開発の目的を達成するために、私たちは一般的にreact-reduxプラグインを使って、それはReduxの流れを簡素化することができます
(無料で最新の完全なフロントエンドの課程を取得してvxの公衆番号に注目します:フロントエンドの拓路者coder、返事:資料はもしこの文章があなたに役に立つならば、称賛して転送して注目して、もっと多くの小さい仲間に見てもらうことを歓迎して、結局分かち合うのはプログラマーの最も基本的な美徳です!!!
公式ドキュメントを参照できる使用方法を簡単に説明します
インストール:npm install--save react-reduxインストール公式ドキュメントはすべてありますコンポーネントのコードを先に入れます(このコンポーネントは強調スタイルがあまりありません)

import React, { Component } from 'react'

import {connect} from 'react-redux'

const TodoList =(props) => {
    const {inputChange,addList,inputValue,list} =props 
    return (
      <div>
        <input onChange={inputChange} value={inputValue}/> 
        <button onClick= {addList}>  </button>
        <ul>
          {list.map((item,index) => {
            return <li >{item}</li>
          })}
        </ul>
      </div>
    )
  }

const stateToProps = (state)=>{
  return {
      inputValue : state.inputValue,
      list : state.list
  }
}//          state       props  
const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
        let action = {
          type:'input_change',
          value:e.target.value
        }
        dispatch(action)
        },
        addList() {
          console.log("12")
          let action = {
            type:"add_list"
          }
          dispatch(action)
        }
    }
}
export default connect(stateToProps,dispatchToProps)(TodoList)
// connect，       （         ），                   。

react-reduxを使う最も重要なのは2つのものを使うことです

組立体

connectコネクタ

1.コンポーネントはプロバイダで、storeはその中のすべてのコンポーネントに提供することができます.私たちはindeにいます.jsエントリファイルへの書き込み

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import TodoList from './TodoList'
import * as serviceWorker from './serviceWorker'
import store from './store'
const App = (
  <Provider store={store}>
    <TodoList/>
  </Provider>
)


ReactDOM.render(App ,document.getElementById('root'));

serviceWorker.unregister();
{/*        ,       ,                store */}

2.connectコネクタ:ReactコンポーネントとReduxのstoreを本当に接続connectについて多くの詳細な説明があります.私はここで説明の深いリンクを解放して、深く理解している学生はconnectの深い理解(ソースレベル)をスタンプします.
まずconnectの使い方の紹介を見て
connectのメソッドの定義はこうです

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

私たちのケースではこのように使用されています

export default connect(stateToProps,dispatchToProps)(TodoList)
//TodoList:   

パラメータ解釈stateToPropsはマッピング関係を表し,このマッピング関係を作成する必要がある.

const stateToProps = (state)=>{
  return {
      inputValue : state.inputValue,
      list : state.list
  }
}//          state       props  

このパラメータがあれば応答イベントを次のコードに変更できます.

 <input value={this.state.inputValue} />

に変更

 <input value={this.props.inputValue} />

コンポーネントのすべての配布方法もマッピングし、dispatchToPropsでstoreを変更できます.

const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
        let action = {
          type:'input_change',
          value:e.target.value
        }
        dispatch(action)
        },
        addList() {
          console.log("12")
          let action = {
            type:"add_list"
          }
          dispatch(action)
        }
    }
}

マッピング関係はすでにできており、次にactionの配布とreducerのビジネスロジックの作成を行うだけでstoreフォルダのindex.jsファイルとreducer.jsファイルが直接出てきました

//index.js
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store

//reducer.js
const defaultState = {
  inputValue:"   ",
  list:['  ',"  ","  "]
}
export default (state=defaultState,action)=>{
  if (action.type=== "input_change") {
    let newstate = JSON.parse(JSON.stringify(state)) 
    newstate.inputValue=action.value
    return newstate
  }
  if (action.type==="add_list") {
    let newstate = JSON.parse(JSON.stringify(state)) 
    newstate.list.push(state.inputValue)
    newstate.inputValue=''
    return newstate
  }
  return state
}

Reduxの基本的なワークフローの手順がよく分からない場合は、次の文章を見て、Reduxワークフローをよりよく学ぶことができます.一方向データストリームreduxは簡単なtodolistをします.