react-redux（安装、单独使用、结合react使用、createStore()、subscribe、getState、dispatch、Provider、mapStateToProps、）

目录

简介

安装

单独使用

const store = createStore(reducer)

store.subscribe(fun)

store.getState()

store.dispatch(obj)

示例

结合react使用

Provider

const mapStateToProps = state=>(obj)

const mapDispatchToProps =  obj

connection

示例

index.js

 store.js

App.js 

中文文档

---

简介

redux是一款独立的JavaScript状态管理模块，可以集成到react中进行使用。

安装

npm i react-redux

单独使用

const store = createStore(reducer)

reducer相当于vuex中mutations，用来保存一些修改state值的相关方法。是一个函数接收两个参数，参数1是state，参数2是action，state是改变前的状态值，action是操作state的相关触发方法和参数。

store.subscribe(fun)

fun为一个函数，当state中的数据发生变化时会执行一遍fun函数

store.getState()

获取reducer中switch的default返回的默认值（一般为state）。

store.dispatch(obj)

用于修改state中的数据，obj传给reducer的action，根据obj.type执行修改不同的值。

示例

import { createStore } from 'redux'
const initState = {
    name: 'xxx',
    age: 18
}
const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'updateName':
            return {
                ...state,
                name: action.name
            };
        default:
            return state;

    }
}
//创建store，用来管理所有状态
const store = createStore(reducer)
//读取store中存储的state值
console.log(store.getState())
//{
//    name: 'xxx',
//    age: 18
//}
store.subscribe(()=>{
    //当state的数据发生变化时将执行该函数
    console.log('state中的数据发生了变化')
})
//调用reducer的updateName，修改state中name属性。
store.dispatch({type:'updateName',name:'yf'}) 
//改变了state中的值，会打印出 'state中的数据发生了变化'

结合react使用

使用rcredux自动生成使用redux的类组件。

Provider

包裹在根组件外（这样所有组件都能共享state状态），store属性传入createStore返回的值。

const mapStateToProps = state=>(obj)

在需要使用共享state状态的组件中使用，映射state到props中，类似于vuex中的mapState。obj上面挂载该组件上需要使用的state中的数据。obj上的属性和值，this.props上都有。

const mapDispatchToProps =  obj

用于映射dispatch到props中，类似与vuex中mapAction。obj上的属性和值，this.props上都有。

connection

把redux相关操作嵌入到组件中的props中，相当于连接公共的state数据。

示例

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'  //导入createStore(reducer)
import { Provider } from 'react-redux'
ReactDOM.render(
    <React.StrictMode>
        <Provider store = { store }>
            <App />
        </Provider>
    </React.StrictMode>
)

 store.js

import { createStore } from 'redux'
const initState = {
    name: 'xxx',
    age: 18
}
const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'updateName':
            return {
                ...state,
                name: action.name
            };
        default:
            return state;

    }
}
export default createStore(reducer)

App.js 

import React, { Component } from 'react'
import { connect } from 'react-redux'
export class App extends Component {
  render() {
    console.log(this.props)
    // {
    //     name:'xxx'
    //     newName:(newName)=>dispatch({type:'updateName',name:newName})
    // }
    setTimeout(()=>{this.props.newName('yf')},5000)//5秒后名字会变为div中内容有xxx变为yf
    return (
      <div>{this.props.name}</div>
    )
  }
}
const mapStateToProps = (state) => ({name:state.name})
const mapDispatchToProps = {
    newName:(newName)=>dispatch({type:'updateName',name:newName})
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

中文文档

Redux中文文档