初探React技术栈二

jiezi

6 年前

redux是 js 的状态容器，提供可预测的状态管理，同时可运行于不同的环境并且还有 redux-devtools 供可视化调试，大型应用下有良好的跨组件通讯与状态管理是必不可少的，那么就在本章中探索 redux 是如何与 react 串联，并是如何使用redux

$ npm or cnpm
$ npm install redux react-redux

相信有不少人都比较好奇为什么我已经有了 redux 还要再多引入一个 react-redux 实际上这样是为保证核心功能最大程度上的跨平台复用

首先新建一个文件夹 store 用来存放 redux 的配置及相关文件，看一下 store 中的文件结构

.
├── actions
│   └── index.js
├── index.js
└── reducers
    └── index.js

2 directories, 3 files

# 其中最外层的 index.js 是主要的配置文件

在 react 的入口文件 index.js 中引入react-redux

Provider 是 react-redux 两个核心工具之一，作用：将 store 传递到项目的组件中，并可以在组件中使用 redux

import一般引入文件夹会默认找到该文件夹中的index.js

import {applyMiddleware, createStore} from 'redux'

import thunk from 'redux-thunk'

import reducers from './reducers/index'

let store = createStore(
    reducers,
    applyMiddleware(thunk)
)

export default store

redux中以 createStore 创建 store 并在其中插入 reducers 与中间件，redux-thunk是为了增强 action 在原生的 redux 中action只能返回对象，但是加上这个中间件就可以返回一个函数并且可以访问其他 action

// 测试 action
function test (text) {return { type: 'test', text: text}
}

export default {test}

import {combineReducers} from 'redux'

const Initstate = {// 初始状态}
const Common = (state = Initstate, action) => {switch (action.type) {
        case 'test':
            return {...state, test: action.text}
        default: 
            return state
    }
}

let reducer = combineReducers({Common: Common})
// 注意 combineReducers 是用于合并多个 reducer 当所用模块不多，协作少时 可以不用

从 reducer 中我们就可以发现 redux 的三大原则：

1.单一数据源 : 所谓的单一数据源是只有一个Model 虽然我们可以定义多个 reducer 但是经过combineReducers 整合发现所有的 Model 都存在一个大的 JSON 里面

2.状态是只读 : 我们可以发现当我们接收到名为test 的变化时；并不是修改 Initstate 而是?> 直接返回 state 相当于只是读取这个默认状态并与 action 中返回的状态整合

3.状态修改均有纯函数完成 ：可以发现 common 这个函数实用 switch 接收到一定的action.type 就会返回相应的属猪

以 App.jsx 示例

import React, {Component} from 'react'
import {connect} from 'react-redux'
import Action from‘./../store/actions/index’class App extends Component {test () {this.props.test(‘test’)
        // 测试数据
    }
    render () {
        return (
            <div>
                {this.props.test} {/* 测试数据 */}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {test: state.Common.test}
}

const mapDispatchToProps = (dispatch, ownProps)  => {
    return {test: (data) => dispatch(Action.test(data))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

mapStateToProps: 这个函数的主要主要作用在与把 modal 中的状态与该组件的 props 进行融合以至于组件可以直接通过 this.props.test 访问到 modal 中的状态

mapDispatchToProps: 这个函数的主要作用是把 action 中的函数通过 dispatch 分发一个 action 到reducer并把 action 函数合并到该组件中的props

Blog_demo 本文 redux_demo

我的博客

redux

关于在 react 项目中如何使用 redux，以及具体写法，我的分层方式这些都在此文中有所展现。但是这只是刚接触时，我的一些思路，还有一些有趣的东西我会在后续中提及（router 与 redux 绑定，middleware 的基本原理等）如果各位大佬有更好的思路请在留言告诉我，不胜感激

初探React技术栈二

redux

store.js reudx 主文件

action

reducer

与 react 组件相结合

链接

结语