React-Reduxのチュートリアルの使用説明

React-ReduxはReactエコでよく使われるコンポーネントであり、Reduxプロセスを簡素化することができます.
1.react-reudxのインストールに必要な依存

npm install --save react-redux

2.Reduxのインストールと使用

npm install --save redux

まずstoreフォルダを作成し、storeフォルダの下にindex.jsファイルを作成します.

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

const store = createStore(reducer)

export default store

その後、フォルダの下にreducer.jsファイルを作成します.

const defalutState = {
     
    inputValue : '',
    list :[]
}

export default (state = defalutState,action) =>{
     
    return state
}

storeレベルでProviderTest.jsxファイルを作成します.これはUIコンポーネントです.stateToPropsはstateのデータをpropsに転送することに相当し、propsがこれらのデータを受け入れることができます.dispatchToPropsも同様の機能です.

import React from 'react'

export const ProviderTest = (props) => {
     

    let {
      list ,inputValue , changeValue ,submit} = props
    
    return (
        <div>

            <input value={
     inputValue} onChange={
     (e)=>changeValue(e)}></input>
            <button onClick={
     submit}></button>
            <ul>
                {
     
                    list.map((item, index) => {
     
                        return <li key={
     index}>{
     item}</li>
                    })
                }
            </ul>
        </div>
    )
}

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

export  const dispatchToProps = (dispatch) => {
     
    return {
     
        changeValue(e) {
     
            let action = {
     
                type : "change_input",
                value : e.target.value
            }      
            dispatch(action)
        },
        submit(e) {
     
            let action = {
     
                type : "add_item",
            }
            dispatch(action)
        }
    }
}

bindActionCreatorを使用することもできます.その役割は、オブジェクトの値をaction creatorsから同じkeyのオブジェクトに変換することですが、変換されたオブジェクトの値は、action creatorをdispatchに包む関数です.

import React from 'react'
import {
      changeCountAction , getTodoList} from '../store/actionCreators';
import {
      bindActionCreators } from 'redux'


export const ReduxTestUi = (props) =>{
     
 
    let {
      count , actions} = props
    

    return (
        <div>
            <p>{
     count}</p>
            <button onClick={
     () =>actions.changeCountAction(1)}>+</button>
            <button onClick={
     actions.getTodoList}></button>
        </div>
    )
}

export const stateToProps = (state) => {
     
   
    return {
     
        count : state.count,
        input : state.inputValue
    }
}
 
export const dispatchToProps = (dispatch) => {
     

    return {
     
    
        actions:bindActionCreators({
      changeCountAction, getTodoList},dispatch)
        // changeCount(){
     
        //     let action = changeCountAction(1)
        //     dispatch(action)
        // },
        // getList(){
     
        //     let action = getTodoList()
        //     dispatch(action)
        // }
    }
}

コンテナコンポーネントであるVisibleProviderTest.jsファイルの作成

import {
      connect } from "react-redux"
import  {
     ProviderTest,stateToProps,dispatchToProps}from "./ProviderTest"

const VisibleProviderTest = connect(stateToProps,dispatchToProps)(ProviderTest)

export default VisibleProviderTest

上記のコードでは、connectメソッドはstateToPropsとdispatchToPropsの2つのパラメータを受け入れます.UIコンポーネントのビジネスロジックを定義します.前者は入力ロジックを担当し、stateをUIコンポーネントのパラメータ(props)にマッピングし、後者は出力ロジックを担当し、UIコンポーネントに対するユーザの操作をActionにマッピングする.
次のコードは、store/reducerで対応する2つのactionのデータ処理を定義し、さっき作成したreducer.jsファイルを以下のように変更します.

const defaultState = {
     
    inputValue : '',
    list : []
}
export default (state = defaultState,action) => {
     

    switch(action.type){
     
        case 'change_input' : {
     
            let newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState
        }
        case 'add_item' : {
     
            let newState = JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            newState.inputValue = ''
            return newState
        }
        default : return state
    }

}

Providerはプロバイダで、このコンポーネントを使用すれば、コンポーネントの中の他のすべてのコンポーネントがstoreを使用することができます.これもReact-reduxのコアコンポーネントです.
App.jsを次のように変更します.

import {
      Provider } from 'react-redux'
import React from 'react';
import ReactDOM from 'react-dom';
import VisibleProviderTest from './VisibleProviderTest'
import store from './store'

function App() {
     
  return (
    <Provider store={
     store}>
      <VisibleProviderTest/>
    </Provider>
  );
  
}

export default App;