React-redux

2019-03-25 本文已影响16人感觉不错哦

Redux的出现是为了解决state里的数据问题。在React中，数据在组件中是单向流动，数据从一个方向（父组件）流向另一个方向（子组件props），由于这个特征两个非父子关系的组件通讯就比较麻烦

http://cn.redux.js.org/docs/introduction/CoreConcepts.html保存一下文档的眼

那么Redux的概念啊什么乱七八糟的就不写了，官网都有介绍，如果你有vuex基础学起来会稍微得心应手，毕竟vue是借鉴Ag跟react的

那么初始化的逻辑流向大致就是如下：

组件——>reducer——>state——>其他组件

组件（dispatch 发送命令 action）——>reducer （管理者/处理器，接收action，OK开始处理）——>state（change state）——>组件（订阅state，发现change了，改变state）

另外一种表现形式

User————>Event（事件）————>view( UI )————>actions————>store（reducer管理作出state变化）————>view（渲染UI）

概念什么的可以查阅上方的URL，自己也是刚刚学习，理解没那么深，慢慢的一步步使用，今天写个很基础的使用

需要注意的几个方法

提供 getState() 方法获取 state
提供 dispatch(action) 方法更新 state（此处需要一个reducer管理事件）
通过 subscribe(listener) 注册监听器

npm install redux -S

在此之前我们首先编写一个样式，就是万恶的递增递减效果，复制下面的代码就行

App.js

  import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Link } from "react-router-dom"
  import './assets/css/App.css'



  class App extends Component {
    constructor(props){
      super(props)
      this.state={

      }
    }
    render() {
      return (
        <div className='app'>
            <span>1</span>
            <span className='btn' >Increase</span> 
            <span className='btn' >Decrease</span> 
        </div>
      );
    }
  }

  export default App;

注意一下你的css路径就行

App.css

.app{
  width: 100%;height: 100px;text-align: center;font-size: 40px;font-weight: 900
}

.btn{
  display:block;width: 300px;height: 60px;line-height: 60px;text-align: center;margin: 0 auto;background: blanchedalmond;cursor: pointer;border-radius: 10px;margin-bottom: 30px
}
.btn:nth-child(2){background: salmon}

效果还是非常好看的（^_^）

之前建议过安装一下这个插件，没有安装的可以安装一下

安装好之后编写一个reducer，管理这个状态

安装好插件之后直接输入rrd 回车即可

    export default (state =0, action={}) => {
        switch (action.type) {
                
            default:
                return state;
        }
    };

给他设置一个默认值，先放着
接着来到index.js，就是最顶级的大哥，编辑一下APP.js就好了

第一步引入createState import { createStore } from 'redux'
第二步引入刚才的文件 import reducer from './reducer/counter'
第三步store初始化 `const store = createStore(reducer)

接下来给他设置监听函数

监听使用subscribe函数，文档上面也有示例，这里我们简单写个监听

那么如何触发这个监听，就是dispatch方法

    store.subscribe(()=>{
        console.log('State Change',store.getState())
    })    
    
    store.dispatch({
        type:'INCREMENT'
    })

OK，直接这样既可，那么reducer就能监听到传输的type，就可以根据这个type做出相应的行为
回到reducer下面的counter.js 文件

    export default (state =0, action={}) => {
        switch (action.type) {
            case 'INCREMENT':
             return  state+10    
            default:
                return state;
        }
    };

此时我们刷新一下页面

成功触发了监听函数并且得到了reducer返回的state数据，OK 接下来就很简单了,把dispatch写成方法传递过去

    store.subscribe(()=>{
        console.log('State Change',store.getState())
    })        
    
    
    
    ReactDOM.render(<App  value={store.getState()} onIncrement={()=>{
        store.dispatch({
                        type:'INCREMENT'
                    })
    }} />,document.getElementById('root'))

在App中接收props

可以看到state已经更新了但是我们的视图并没有渲染，如何重新触发渲染呢，将模板的render封装成一个函数，使用subscribe监听

此时已经可以触发效果了，这是最基础的使用，多敲几遍吧，递减效果也是照搬的