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);