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
组件:
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 (
)
}
}
//当前组件是交给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
}
//添加数据
if(action.type === ‘list_add’){
let temp = JSON.parse(JSON.stringify(state))
temp.list.push(temp.value)
temp.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
})
},
listAdd(){ //添加数据
dispatch({
type: ‘list_add’
})
}
}
}