redux, react-redux 及使用案例演示

redux 和 react-redux

Redux 是一个独立的JavaScript 状态管理库, 并非是 React 内容之一

redux中文文档官网

redux核心概念

理解redux的几个核心概念以及它们之间的关系

1. state
2. reducer
3. store
4. action

state 对象

通常我们会把应用中的数据存储到一个对象树(Object Tree)中进行统一管理, 我们把这个对象树称为 : state

1. state 是只读的

我们需要注意的是, redux中, 为了保证数据状态的可维护和测试性, redux不允许直接修改 state 中的原始数据, 而是通过返回一个新的对象的方式处理.

2. 通过纯函数修改state

什么是纯函数?

#1. 纯函数
    1. 相同的输入永远返回相同的输出
    2. 不修改函数的输入值
    3. 不依赖外部环境状态
    4. 无任何副作用
#2. 使用纯函数的好处
	1. 便于测试
    2. 有利于重构

action 对象

我们对 state 的修改是通过 reducer 纯函数来进行的, 同时传入的 action 来执行具体的操作, action 是一个对象, 该对象中包含了一些常用属性.

#1. action 对象的属性
	- type属性: 表示要进行操作的动作类型, 比如 增删改查...
    - payload属性: 操作state的同时传入的数据参数
    
# 但是需要注意的是, 我们不直接去调用 Reducer 函数, 而是通过 Store 对象提供的 dispatch 方法来调用 reducer 纯函数.

store 对象

为了对 state, Reducer 和 action 进行统一管理和维护, 我们需要创建一个 Store 对象.

redux 三大原则

• 单一数据源: 整个应用的 state 被存储在一个 Object tree 中, 并且这个 Object tree 只存在于唯一一个 store中
• State 是只读的: 唯一改变 state 的方法就是触发 action , action 是一个用于描述已发生事件的普通对象.
• 使用纯函数来执行修改操作.

react-redux

注意: 即便我们使用react-redux . 英文官方文档中仍然说明: 我们仍然需要安装 redux 来创建一个 store, 我们只是在 react 项目中借助 react-redux 提供的 API 更加方便应用而已. 所以 redux 和 react-redux 这两个库是结合使用的.

因为 redux 是一个独立的集中式管理状态数据的库, 我们平常在 React 项目中使用的时候, Redux 官方也提供了一个React 绑定库是react-redux , 我们通常会结合这个官方推荐的绑定库一起使用.

react-redux 库中核心 API

• connect()

redux 和 react-redux 案例代码如下

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import App from './App';
import store from './redux/index'

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

src/App.js

import React,{Fragment} from 'react'
import Child from './Child'
function App(props) {
    console.log('App组件中的属性props -->',props);
    return(
        <Fragment>
            <h1>我是App件哦!! </h1>
            <Child msg={"我是父组件传递的数据"} />
        </Fragment>
    )
}
export default App

src/Child.js

import React,{Fragment} from 'react'
import {connect} from 'react-redux'
function Child(props) {
    console.log('Child子组件 -->>',props);
    const {dispatch,num} = props
    return (
        <Fragment>
            <h2>Hello,我是Child组件哦!</h2>
            <p>num值为:{num}</p>
            <button onClick={()=>{
                dispatch({
                    type:'ADD',
                    payload:{
                        msg:'我是载荷参数...'
                    }
                })
            }}>点我 + 1</button>
        </Fragment>
    )
}
// 这里参数的 state 是 redux 的store 里返回的state
export default connect((state,props)=>{
    // 这里 return 回的state 会注入到当前包装组件的 props 中.
    return {
        ...state,
        ...props
    }
})(Child)

src/redux/index.js

import {createStore} from 'redux'

function reducer(state={num:1},action) {
    console.log('reducer的初次执行-->>',state,action);
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                num: state.num+1,
                payload: action.payload
            }
    }
    return state
}
const store = createStore(reducer);
export default store