react-redux
安装react-redux和redux
yarn add react-redux
yarn add redux
创建store文件夹
react-redux的provider和connect
配置src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './component/TodoList'
import { Provider } from 'react-redux'
import store from './store'
const App=(
//被Provider包裹的组件都可以获得store里面的state值
<Provider store={store}>
<TodoList />
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));
/store/index
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
/store/reducer
import { CHANGE_INPUT,ADD_ITEM } from './actionTypes'
const defaultState = {
inputValue:'writting',
list:['1']
}
export default (state = defaultState,action) =>{
if(action.type === CHANGE_INPUT){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState;
}
if(action.type === ADD_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
return newState;
}
return state
}
/store/actionCreators
import { CHANGE_INPUT, ADD_ITEM } from './actionTypes'
//返回对象({})
export const changeInputAction = (value)=>({
type:CHANGE_INPUT,//type有点标识符的意思
value
})
export const addItemAction = ()=>({
type:ADD_ITEM//type有点标识符的意思
})
/store/actionTypes
export const CHANGE_INPUT = 'changeInput'
export const ADD_ITEM = 'addItem'
/comonents/TodoList
import React, { Component,Fragment } from 'react';
import { Input } from 'antd';
import { Button } from 'antd';
import { List } from 'antd';
import { connect } from 'react-redux'
import { changeInputAction,addItemAction } from '../store/actionCreators'
//没有业务流程(constructor),写成方法组件性能更好
class TodoList extends Component {
render() {
//项目优化
let { inputValue,list,inputChange,addItem } = this.props
return (
<Fragment>
<div style={{marginTop:'20px'}}>
<Input
style={{width:'300px',marginRight:'10px'}}
value = {inputValue}
onChange = {inputChange}
/>
<Button type="primary" onClick={addItem}>提交</Button>
</div>
<div style={{marginTop:'20px'}}>
<List
size="large"
bordered
dataSource={list}
renderItem={(item,index) =>
<List.Item>{item}</List.Item>}
/>
</div>
</Fragment>
);
}
}
//映射关系,把store.state中的inputValue给props中的inputValue
//把store.state中的list给props中的list
const stateToProps = (state)=>{
return {
inputValue:state.inputValue,
list:state.list
}
}
//映射,this.props.inputChange调用,多个方法return加逗号(,)
const dispatchToProps = (dispatch)=>{
return {
inputChange(e){
let action = changeInputAction(e.target.value)
dispatch(action)
},
addItem(){
let action = addItemAction()
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);