redux-学习总结

使用

• 创建数据仓库

// store.js
import { createStore } from 'redux'

// 初始状态值
const initState = {
    a: 1,
    b: 2
}
// reducer 函数，传入 createStore 创建数据仓库，会执行一次
// 将来对 state 进行修改，每一次都会调用该函数
// 该函数每一次执行都需要返回一个新的 state，若没有修改，则返回原来的 state
const reducer = (state = initState, action) => {
    // 修改操作
    return state
}
const store = createStore(reducer)
export default store

• 获取数据仓库中的数据

store.getState()

• 修改仓库数据

const reducer = (state = initState, action) => {
    // action 即为 dispatch 传递的对象 {type: 'modify', value: 10}
    switch(action.type) {
        case 'modify':
            // 修改操作
            return {
                ...state,
                a: action.value
            }
        default:
            return state
    }

}
// dispatch 执行一次就触发一次 reducer 执行
store.dispatch({
    type: 'modify',
    value: 10
})

react 中使用 redux

// stote.js
import { createStore } from 'redux'

// 初始状态值
const initState = {
    data: {
        a: 1,
        b: [1, 2, 3]
    }
}
const reducer = (state = initState, action) => {
    switch(action.type) {
        case 'modify':
            return {
                data: {
                    ...state.data,
                    ...action.value
                }
            }
        default:
            return state
    }
}
const store = createStore(reducer)
export default store

// **************

// App.js
import React, { Component } from 'react'
import Store from './store/index'
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            data: Store.getState().data
        }
    }
    componentDidMount() {
        this.unsubscribe = Store.subscribe(() => {
            console.log('state 变化了', )
            this.setState({
                data: {
                    ...this.state.data,
                    ...Store.getState().data
                }
            })
        })
    }
    componentWillUnmount() {
        // 取消订阅，防止内存泄露，因为订阅回调函数引用了外部 this
        this.unsubscribe()
    }
    render() {
        return (
            <div onClick={this.handleAction}>按钮</div>
        )
    }
    handleAction = () => {
        // 1、点击后调用 dispatch 修改数据仓库数据
        // 2、当前组件在挂载时候订阅了当前数据仓库的变化
        // 3、所以数据仓库数据变动后，执行订阅的回调函数
        // 4、回调函数修改当前组件的数据
        Store.dispatch({
            type: 'modify',
            value: {
                b: [4, 5, 5]
            }
        })
    }
}

react 中使用 react-redux

• 使用 connect 连接数据仓库和组件

// stote.js
import { createStore } from 'redux'

// 初始状态值
const initState = {
    data: {
        a: 1,
        b: [1, 2, 3]
    }
}
const reducer = (state = initState, action) => {
    switch(action.type) {
        case 'modify':
            return {
                data: {
                    ...state.data,
                    ...action.value
                }
            }
        default:
            return state
    }
}
const store = createStore(reducer)
export default store

// **************
// App.js
import ReactDOM from 'react-dom'
import React, { Component } from 'react'
import store from './store'
import SonComp from './component/SonComp'
import { Provider } from 'react-redux'
export default class App extends Component {
    render() {
        return (
            // 在根组件放置数据仓库，通过 Provider 共享
            <Provider store={store}>
                <SonComp/>
            </Provider>
        )
    }
}
ReactDOM.render(<App/>, document.querySelector('#root'))

// ******************
// SomComp.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
class SonComp extends Component {
    render() {
        // 经过 mapStateToProps 处理，this.props 上多了全局属性
        // this.props. // { a: 1, b: [1,2,3] }
        // 经过 mapDispatchToProps 处理，this.props 上多了方法 handleAddNumber
        // this.props.handleAddNumber
        return (
            <div onClick={this.btnAction}>Son Comp</div>
        )
    }
    btnAction = () => {
        // 1、向全局数据仓库添加属性{c: 5}
        // 2、全局数据仓库更新后，触发 mapStateToProps 更新组件的 props
        // 3、此时 this.props 为 {a: 1, b: [1,2,3], c: 3}
        this.props.handleAddNumber({ c: 5 })
    }
}
// 将全局的 state 转为组件的 props
const mapStateToProps = (state, props) => {
    // state: 全局的数据仓库
    // props：父组件传递的属性
    // 返回的属性将与组件的 props 合并
    return state // 这里我们把全局数据都设置到 props 上
}
// 将全局的 dispatch 转为组件的 props
const mapDispatchToProps = (dispatch, props) => {
    // dispatch: 全局的dispatch方法
    // props：父组件传递的属性
    // 返回的属性将于 props 合并，这是一个 dispatch 操作
    return {
        handleAddNumber(value) {
            // 修改全局数据仓库
            dispatch({
                type: 'modify',
                value
            })
        }
    }
}
// connect 是高阶组件
export default connect(mapStateToProps, mapDispathToProps)(SonComp)