React-redux使用的步驟總結

React-redux的學習也有一定的時間了，非常好用，就是容易忘記用法，本文將總結他的用法。以備不時之需

一、使用前的準備

1.  使用React-redux需要安裝redux，react-redux

yarn add redux，react-redux

2.  什麼都不說，先把文件的結構建立好，使用redux 的時候，我們會建立如下文件：

3.  記住他們之間的關係

• index.js            是主要的文件
• action.js           是提交給reducer處理的一些方法，就寫在這裏
• actionType.js   這裏就是爲了方法不寫錯，減少錯誤而存在的（方法名字大寫）
• reducer.js         這裏是index的管理者，也就是store的管理者，就是處理一些東西的，如改變state的值等

一個一個來寫一下他們文件內的內容

index.js

import {createStore} from 'redux'     
import reducer from './reducer'
const store = createStore(reducer)        //完成了reducer的注入,完成store的創建
export default store

// 這裏是不建立state的值的，這一些都交給管理者reducer來處理，這裏是固定寫法

reducer.js

// 這裏放一些處理store的方法
// 寫業務邏輯
const defaultState = {    //首先要寫一個默認的state，並將這裏傳給下面暴露的方法
    //  這裏就是放一些公共的state的值，就是在這裏出創建一個公共的一些數據
    inputValue: 'yangmingwu',
    list:['yyang']
}
export default (state = defaultState,action)=>{  // 第一個參數就是state，第二個傳的是action
                                                 //由action派發過來的任務
    if(action.type==='changeValue'){
        let newsState = JSON.parse(JSON.stringify(state))
        newsState.inputValue =  action.value
        return newsState
    }
    if(action.type ==='add_item'){
        let newsState = JSON.parse(JSON.stringify(state))
        newsState.list.push(newsState.inputValue)
        return newsState
    }
    return state                            
}

// react-redux

主要的就是這兩個文件，其他就不做解釋了，有空我在補充下來

 

二、開始使用

剛剛我們已經做好了一些準備工作，現在開始使用，我們打開index.js父組件，來看看

import React from 'react';
import ReactDOM from 'react-dom';
//import Home from './Home';
import TodoList from './TodoList'
import { Provider } from 'react-redux'
import store from './Store/index'

const App =(
    <Provider store={store}>{/*這李下面的所有組件都可以用這個store */}
        <TodoList />
    </Provider>
)
ReactDOM.render(App, document.getElementById('root')
);

 這裏的文件內容肯定不陌生，來分析

1.  首先要引入的是react-redux的Provider

import { Provider } from 'react-redux'

字面理解就是提供者的意思，他也是一個組件，這裏傳一個store，下面的所有子組件都也可以使用這個store，在render裏使用它

也就是在我們的Todolist那個組件裏面可以使用這個store的內容，記住這麼寫就是了哈

 const App =(
    <Provider store={store}>{/*這李下面的所有組件都可以用這個store */}
        <TodoList />
    </Provider>
)
ReactDOM.render(App, document.getElementById('root')
);

所有TOdoList就可以使用這個store了 

2.    然後在看一下子組件

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { list } from 'postcss';
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div>
                <div>
                    <input value={this.props.inputValue}  onChange ={this.props.inputChange}/>
                    <button onClick= {this.props.clickBtn}>提交</button>
                </div>
                <div>
                    <ul>
                        {
                            this.props.list.map((item,index)=>{
                                return (<li key={index}>{item}</li>)
                            })
                        }

                    </ul>
                </div>
            </div>
        );
    }

}
//映射成這個組件的屬性嗎，相當於現在的翻譯，把state翻譯成這個組件的屬性
const stateToProps  = (state)=>{
    return {
        list: state.list,
        inputValue:state.inputValue
    }
}
const dispatchToProps = (dispatch)=>{
    return {
        inputChange(e){
            // console.log(e.target.value)
            let action = {
                type: 'changeValue',
                value: e.target.value
            }
            dispatch(action)
        },
        clickBtn(){
            let action = {
                type: "add_item"
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps,dispatchToProps)(TodoList);



//

代碼太多，看前面

import { connect } from 'react-redux'

這裏就是配合Provider使用的

//映射成這個組件的屬性嗎，相當於現在的翻譯，把state翻譯成這個組件的屬性
const stateToProps  = (state)=>{
    return {
        list: state.list,
        inputValue:state.inputValue
    }
}
const dispatchToProps = (dispatch)=>{
    return {
        inputChange(e){
            // console.log(e.target.value)
            let action = {
                type: 'changeValue',
                value: e.target.value
            }
            dispatch(action)
        },
        clickBtn(){
            let action = {
                type: "add_item"
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps,dispatchToProps)(TodoList);

暴露出去connect方法，第一個參數的意思是，你要將什麼變成這個組件的屬性，他是一個函數，返回你想要的state的值，什麼意思呢？比如這裏我們要使用在state裏面存放的list,我們不需要通過

this.state.list       //不用這種方式

 因爲connect的第一份參數已經幫我們寫好了

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

要用的時候，只需

this.props.list       //這樣就能用了 

 好，來看connect的第二個參數

第二個參數也是一個函數，返回的是在本組件中使用的方法，傳入dispatch，還可以派發任務給reducer，這時候我們不需要通過下面這種方式使用

this.inputChange.bind(this)     //不需要通過這種方式來引用這個方法

直接

 this.props.inputChange      //這樣就OK了

 基本就這麼用吧！！！！有不足再補充