reducer.js文件中的代码:
//定义state中数据的默认值 const defaultState = { inputValue: '', list:[] } //导出数据,并且将默认值赋给state export default (state=defaultState, action) => { return state; } 在TodoList.js中引入store 在TodoList中将store中的数据通过getState接收到state中 constructor(props) { super(props); //将store中的数据通过getState接收到state中 this.state = store.getState(); } 在TodoList中Input给value赋值 使用react-redux,在index.js中,首先引入Provider这个API,它可以将获取到的store数据提供给其内部的组件使用,index.js中的代码如下: import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList'; import { Provider } from 'react-redux'; import store from './store'; const App = ( //Provider将store中的数据全部提供给其内部的组件 <Provider store={store}> <TodoList /> </Provider> ); ReactDOM.render(App, document.getElementById('root')); 在TodoList中,我们先引入一个connect 13.将之前的constructor部分删除,在最下面增加代码,如下: //mapStateToProps把store公共数据映射给组件并将其变成组件的props const mapStateToProps = (state) => {//这里的state指的是store中的数据 return { inputValue:state.inputValue } } //connect是让TodoList和store做连接 export default connect(mapStateToProps,null)(TodoList);然后使用input中的value只需要使用this.props.inputValue 14. 当输入框中输入的内容发生改变,如果将对应的store数据也随之变化
首先我们需要定义mapDispathToProps,其作用是将store.dispath的方法挂载到props上,代码如下: //将store.dispath的方法挂载到props上 const mapDispathToProps = (dispatch) => { return { changeInputValue(e) { const action = { type: 'change_input_value', value:e.target.value } //提供dispacth将action发送给store dispatch(action); } } }将connect中的第二个参数null,修改为mapDispathToProps
input中,加入onChange方法,这里定义的changeInputValue,其具体功能是在mapDispathToProps的return中实现
在reducer文件中,接收并返回数据
//判断action的类型并做对应的操作 if (action.type === 'change_input_value') { //对state数据做一个深拷贝 const newState = JSON.parse(JSON.stringify(state)); newState.inputValue = action.value; //返回数据 return newState; } 将输入框中的内容存放到list中去 给button绑定一个点击事件 在mapDispathToProps的return中编写handleClick内容 handleClick() { const action = { type:'add_item' } dispatch(action); } 在reducer文件中,我们判断action的类型是否是add_item if (action.type === 'add_item') { const newState = JSON.parse(JSON.stringify(state)); newState.list.push(newState.inputValue); newState.inputValue=''; return newState; }这样就可以了,看下效果:
点击列表项,就可以删除这个元素 给li标签绑定一个点击事件handleDelete 向store发送action请求并接收数据: handleDelete(index) { const action = { type:'delete_item' } dispatch(action); } 在reducer文件中处理action请求 if (action.type === 'delete_item') { const newState = JSON.parse(JSON.stringify(state)); newState.list.splice(action.index, 1); return newState; }这样就实现了基本功能
我们可以发现现在的TodoList是一个无状态组件,只有一个render函数,下面进行代码精简 const TodoList = (props) => { return ( <div> <div> <input value={props.inputValue} onChange={props.changeInputValue} /> <button onClick={props.handleClick}>提交</button> </div> <ul> { //这里需要拿到store中list中的数据 props.list.map((item,index) => { return <li onClick ={props.handleDelete} key={index} >{item}</li> }) } </ul> </div> ) }完整代码: TodoList.js:
import React, { Component } from 'react'; import { connect } from 'react-redux'; const TodoList = (props) => { return ( <div> <div> <input value={props.inputValue} onChange={props.changeInputValue} /> <button onClick={props.handleClick}>提交</button> </div> <ul> { //这里需要拿到store中list中的数据 props.list.map((item,index) => { return <li onClick ={props.handleDelete} key={index} >{item}</li> }) } </ul> </div> ) } // class TodoList extends Component{ // render() { // return ( // <div> // <div> // <input // value={this.props.inputValue} // onChange={this.props.changeInputValue} // /> // <button onClick={this.props.handleClick}>提交</button> // </div> // <ul> // { // //这里需要拿到store中list中的数据 // this.props.list.map((item,index) => { // return <li onClick ={this.props.handleDelete} key={index} >{item}</li> // }) // } // </ul> // </div> // ) // } //} //mapStateToProps把store公共数据映射给组件并将其变成组件的props const mapStateToProps = (state) => {//这里的state指的是store中的数据 return { inputValue: state.inputValue, list: state.list } } //将store.dispath的方法挂载到props上 const mapDispathToProps = (dispatch) => { return { changeInputValue(e) { const action = { type: 'change_input_value', value:e.target.value } //提供dispacth将action发送给store dispatch(action); }, handleClick() { const action = { type:'add_item' } dispatch(action); }, handleDelete(index) { const action = { type:'delete_item' } dispatch(action); } } } //connect是让TodoList和store做连接 export default connect(mapStateToProps,mapDispathToProps)(TodoList);src下的index.js:
import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList'; import { Provider } from 'react-redux'; import store from './store'; const App = ( //Provider将store中的数据全部提供给其内部的组件 <Provider store={store}> <TodoList /> </Provider> ); ReactDOM.render(App, document.getElementById('root'));store下的index.js:
import { createStore } from 'redux'; import reducer from './reducer' //创建store,并且把reducer传递给store const store = createStore(reducer); export default store;reducer.js:
//定义state中数据的默认值 const defaultState = { inputValue: '', list:[] } //导出数据,并且将默认值赋给state export default (state = defaultState, action) => { //判断action的类型并做对应的操作 if (action.type === 'change_input_value') { //对state数据做一个深拷贝 const newState = JSON.parse(JSON.stringify(state)); newState.inputValue = action.value; //返回数据 return newState; } if (action.type === 'add_item') { const newState = JSON.parse(JSON.stringify(state)); newState.list.push(newState.inputValue); newState.inputValue=''; return newState; } if (action.type === 'delete_item') { const newState = JSON.parse(JSON.stringify(state)); newState.list.splice(action.index, 1); return newState; } return state; }