初步了解redux

　　redux作为react的状态状态管理工具，是十分重要的一部分，但是它在学习起来比较困难。它的写法一共分为三部分，而且他不像其他的东西一样可以写一步，在页面上查看一下。它必须三个部分全部完成之后，才能查看效果，所以redux在报错的时候也是非常的头痛的，不好查找具体是在哪一步写错了内容。

　　下面简单的说一个我对它的一些了解和使用，给大家提供一些参考

　　好的，使用redux最开始的一步就是安装

　　npm i --save redux和npm i --save react-redux

　　安装完成之后，我们去修改index.js文件的内容，先导入Provider

import {Provider} from 'react-redux'

　　下一步

class Index extends React.Component{
    render() {
        return (
            <React.Fragment>
                <Provider>
                    <App/>
                </Provider>
            </React.Fragment>
        );
    }
}

ReactDOM.render(<Index />, document.getElementById('root'));

现在页面正常是可以显示出来的，但是在控制台内会有两个报错，这个我们先不用管

接下来回到我们的App.js页面写我们的内容，我们在页面上定义两个点击按钮，一个增值，一个减值

<div>计算器:{this.props.state.number}</div>
<button onClick={this.incCounter.bind(this)}>+</button>
<button onClick={this.decCounter.bind(this)}>-</button>

接下来定义一下点击事件，并且把这个方法传递给index.js页面的方法

constructor(){
     super()
     this.iAmount = 0
}
//将值传递给src/index.js里面的counter
//增值
incCounter(){
     this.props.dispatch({type:"INC",amount:++this.iAmount})
}
//减值
decCounter(){
    this.props.dispatch({type:"DEC",amount:--this.iAmount})
}

现在那我们返回到index.js  写我们的方法

function counter(state={number:0},action) {
    switch (action.type) {
        case "INC":
            return{number: action.amount}
        case "DEC":
            return{number: action.amount}
        default:
            return state
    }
}

现在我们的函数也定义完了，我们需要将它存放一下，我们在导入createStore和combineReducers

import {createStore，combineReducers} from 'redux'

然后

let reducer=combineReducers(//合并多个函数
    {
        counter:counter,
    }
)
const store=createStore(reducer);
class Index extends React.Component{
    render() {
       return (
            <React.Fragment>
                <Provider store={store}>
                    <App/>
                </Provider>
            </React.Fragment>
         );
     }
 }

好了现在我们基本差不多就要完成了，就剩下最后的一点现在我们返回到App.js导入一个connect以及变换一下导出组件的方法

import { connect } from 'react-redux';

export default connect((state)=>{
    return {
        state: state
    }
})(App);

到目前为止，我们的这个功能也完成了，