react-redux使用说明

[](()2、实现步骤

====================================================================

[](()2.1、安装依赖

cnpm i redux react-redux --save

[](()2.2、封装底层代码

项目目录结构

• src

• store 管理状态的目录

• index.js 用于生成 store 对象

• reducer.js 用于生成 reducer 函数

• state.js 用于生成初始化 state 对象

• map.js 用于创建 store 与 props 的映射函数，props指组件中的props对象

• word.js 用于生成数据字典常量

• Input 输入框组件

• index.jsx

• index.css

• List 列表组件

• index.jsx

• index.css

• App.jsx 根组件

• index.js 入口文件

[](()2.2.1、创建 store

创建 store/reducer.js

const reducer = (state,action) => {

return state

}

export default reducer

创建 store/state.js

const state = {

value: ‘’,

list: []

}

export default state

创建 store/index.js

import {createStore} from ‘redux’

import reducer from ‘./reducer’

import state from ‘./state’

const store = createStore(reducer,state)

export default store

[](()2.2.2、创建映射文件

创建 store 与组件中的 props 之间的映射文件。

创建 store/map.js

//store中的state与组件中props的映射

const mapState = state => {

return {

value: state.value,

list: state.list

}

}

//store中的dispatch与组件中props的映射

const mapDispatch = dispatch => {

return {

}

}

export {

mapState,

mapDispatch

}

[](()2.3、实现功能

[](()2.3.1、输入功能

更新 store/reducer.js 代码：

const reducer = (state,action) => {

//更新value的值

if(action.type === ‘change_value’){

let temp = JSON.parse(JSON.stringify(state))

temp.value = action.value

return temp

}

return state

}

export default reducer

更新 store/map.js 代码：

//只需要更新mapDispatch函数即可

//store中的dispatch与组件中props的映射

const mapDispatch = dispatch => {

//此处返回的的组件中的props上的函数

return {

changeValue(value){ //更新value数据的函数

dispatch({

type: ‘change_value’,

value

})

}

}

}

创建 Input/index.jsx 组件：

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】

import React,{Component} from ‘react’

import {connect} from ‘react-redux’

import {mapState,mapDispatch} from ‘…/store/map’

class index extends Component {

//更新value

change(e){

this.props.changeValue(e.target.value)

}

render() {

return (

{this.props.value}

)

}

}

//当前组件是交给connect管理，在当前组件中就可以使用映射的props对象

export default connect(mapState,mapDispatch)(index)

[](()2.3.2、添加数据

更新 store/reducer.js 代码：

const reducer = (state,action) => {

//更新value的值

if(action.type === ‘change_value’){

let temp = JSON.parse(JSON.stringify(state))

temp.value = action.value

return temp

}