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了

 基本就这么用吧！！！！有不足再补充