初学react(5)——使用redux

在vue中有一个状态管理的库叫vux，之前听说过react的也有类似的状态管理库叫redux，于是，我从网上学习一下redux，从学习中，我了解到以下几点：

1、redux是一个JS开发使用的状态管理库，并不局限于react使用，在react中使用需要同时引入react-redux库。

2、redux运用于大型复杂的JS项目，一个应用只能存在一个store，stort中的state和action都是一个对象，state里面的属性不能被修改。

3、reducer把state和action串联起来，在reducer是一个函数，当触发dispatch时，会执行reducer里面的逻辑，dispatch传入的对象作为action，然后要返回一个新的state。

4、state会被整个应用的所有组件所共用。

现在，我尝试在react应用中使用redux，我要实现的目的是在About组件中，选择一个词语，将会Index组件中显示出来，显示的内容会随着选择的内容改变。

第一步，安装redux

npm i redux react-redux -D

这里是要同时安装redux和react-redux

第二步，创建组件

Index组件代码：

import React, {Component} from 'react'

class Index extends Component{
    render() {
        return (<div>{this.props.word}</div>)
    }
}

export default Index

About组件的代码：

import React, {Component} from 'react'

class About extends Component{
    changeWord = (event) => {
                        //后面再补充事件
    }
    render() {
        return (
            <select onChange={this.changeWord}>
                <option value="学习react">学习react</option>
                <option value="不想学习">不想学习</option>
                <option value="很爱学习">很爱学习</option>
            </select>
        )
    }
}

export default About

App.js文件的代码：

import React, { Component  } from 'react';
// import logo from './logo.svg';
import './App.css';

import Index from './pages/index'
import About from './pages/about'

class App extends Component {
  render() {
    return (
        <div className="App"> 
          <About />
          <Index />
        </div>
    );
  }
}

export default App;

目前的页面效果：

第三步，引入redux

在src/index.js中引入redux可以使整个应用同时使用redux，代码修改的部分：

import { createStore } from 'redux'
import { Provider } from 'react-redux'
const store = createStore()
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));

第四步，定义reducer

修改src/index.js的代码，增加一个reducer

import { createStore } from 'redux'
import { Provider } from 'react-redux'

function reducer(state={word: '学习react'}, action) {
    switch(action.type) {
        case 'changeWord': 
        return { 
            word: action.word
        }
        default: 
            return state
    }
    
}

const store = createStore(reducer)
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));

第五步，组件访问到redux

在About组件中，代码：

import React, {Component} from 'react'
import { connect } from 'react-redux'
class About extends Component{
    changeWord = (event) => {
        this.props.dispatch({type: 'changeWord', word: event.target.value})                //后面再补充事件
    }
    render() {
        return (
            <select onChange={this.changeWord}>
                <option value="学习react">学习react</option>
                <option value="不想学习">不想学习</option>
                <option value="很爱学习">很爱学习</option>
            </select>
        )
    }
    
}

export default connect()(About)

改变的地方有：导入了connect，加入改变的事件和导出的对象

在Index组件中，代码：

import React, {Component} from 'react'
import { connect } from 'react-redux'

class Index extends Component{
    render() {
        return (<div>about选择的是： {this.props.word}</div>)
    }
}

export default connect((state) => {return { word: state.word }})(Index)

改变的地方有：导入了connect和改变了导出对象。connect方法传入的有返回对象的函数，函数返回的对象将写入到props中，不传这个方法将得不到props.word。

总结一下，react使用redux要同时安装redux和react-redux项目，redux提供了store，在使用时候需要新建一个或多个reducer传入到创建的函数中，store将作为参数传到Provider组件中，Provider组件是由react-redux提供（涉及到组件相关的，都是要靠react-redux）。在组件中要关联上redux需要使用connect连接，connect是react-redux里的一个方法，传入一个参数为store中的state，并返回一个对象，对象的内容将写到props上，如果不需要使用state里的值，可不传这个函数。connect()返回一个函数，这个函数传入组件作为参数，将返回一个新的组件对象，这个组件能使用redux。