我们以todolist中增加代办事项这个功能为例:
为了开发规范一点我们要采取reducer的分片写法,即一个类型数据一个模块
不使用react-redux书写规范
生产安装redux
yarn add redux
在src目录下建立store目录
建立index.js和reducer.js
index.js
import { createStore } from 'redux' import reducer from './reducer' const store = new createStore ( reducer ) export default store
reducer.js
import { combineReducers } from 'redux' const reducer = combineReducers({ }) export default reducer
建立todos文件夹,依次建立
state.js
const state = { todos : [ { id : 1, text : '睡觉' }, { id : 2, text : '吃饭' }, { id : 3, text : '打豆豆' } ] } export default state
type.js
export const ADD_TODOS = 'ADD_TODOS'
actionCreators.js
import * as type from './type' import store from '../index' const actionCreators = { addTodos( value ){ let action = { type : type.ADD_TODOS, payload : value } store.dispatch( action )//相当于vue里的commit,把action发送给reducer } } export default actionCreators
reducer.js
import * as type from './type' import state from './state' const reducer = ( previousState = state,action) => {//将state赋值给previousState作为初始值 let newState = {//结构出来给newState,以后对newState进行操作 ...previousState } switch (action.type) { case type.ADD_TODOS: newState.todos.push({ id : newState.todos.length + 1, text : action.payload }) break; default: break; } console.log(newState) return newState } export default reducer
这些完成后我们需要把todos文件夹下的reducer拿到src下的reducer使用,即src目录下的reducer.js文件改为这样
import { combineReducers } from 'redux' import todos from './todos/reducer' const reducer = combineReducers({ todos }) export default reducer
这样一个Redux就完成了,接着就是创建组件然后调用store来
src目录下建立pages目录,建立todos目录,下建立todo的组件
在组件中调用store里的方法,两个文件,TodoInput里是增加任务的,所以我们应当在TodoInput里调用activeCreators里的方法来执行任务
TodoInput.js
import React,{ Component,Fragment } from 'react' import actionCreators from '../../store/todos/actionCreators'//引入actionCreators class TodoInput extends Component { addTodos = (e) => { let keyCode = e.keyCode let value = e.target.value if ( keyCode === 13 ){ actionCreators.addTodos(value)//调用actionCreators里的方法 } } render () { return ( <Fragment> <input onKeyUp={ this.addTodos } type="text"></input> </Fragment> ) } } export default TodoInput
TodoContent.js
TodoContent里是数据的展示,这里有几个关键点,Redux里视图更新需要store.subscribe来完成,
知识点:
- 列表渲染的方法
- 怎么让actionCreators里的方法执行后视图更新
import React,{ Component,Fragment } from 'react' import store from '../../store/index' const Item = (props) => { return ( <li>{ props.item.text }</li> ) } class TodoContent extends Component { constructor () { super() this.state={ todos : store.getState().todos.todos//reducer里的名称到todos里的state里的数据名称 } } renderItem = () => {//最好的列表渲染方法 return this.state.todos.map( (item,index)=>{ return <Item item={ item } key={ item.id }></Item> }) } componentDidMount(){//视图更新的方法 store.subscribe(()=>{ this.setState({ todos : store.getState().todos.todos }) }) } render () { return ( <Fragment> <ul> { this.renderItem() } </ul> </Fragment> ) } } export default TodoContent
index.js
import TodoInput from './TodoInput' import TodoContent from './TodoContent' export { TodoInput,TodoContent }
