IAmor

# Redux - 02

怎么说呢，通过action提交改变state会导致页面充斥着很多长得相同的代码。稍作优化，将其拆分。后期可以考虑将其封装。

# action的拆分

actionCreators.js.js

//actionCreators.js

export const changInputAction = (value) => {
    type: '',
    value
}

疑问，一个对象怎么拆分出来变成一个函数了 立即执行？

没有找到文档但是根据实战，如果有入参，他一定是函数的形式，没有入参，则随意了。写成一样的也统一。

# 基础完结

基础结束，需要注意几点：

  1. store必须是唯一
  2. 只有store只能改变自己内容，reducer不能改变

newState的由来

  1. reducer必须是纯函数（返回值必须是由入参进行控制

禁止返回固定值，在reducer里面进行ajax进行请求

# UI组件拆分

把render里面的内容额外找个页面进行编写。通过父子组件传值，将方法函数进行传递。

将ui与业务逻辑完全独立，加快速度。

//listUi.js

class TodoListUi extends Component {
  render () {
    return (
      <div style={{margin: '10px'}}>
        <div className='container'>
          <Input
            style={{width: '300px'}}
            value={this.props.inputValue}
            onChange={(e) => this.props.change(e)}
          />
          <Button
            type='primary'
            onClick={() => this.props.add()}>新增</Button>
        </div>
        <div style={{marginTop:'10px', width: '300px'}}>
          <List
            bordered
            dataSource={this.props.list}
            renderItem={(item, index) => (
              <List.Item onClick={() => this.props.removeItem(index)}>{item}</List.Item>
            )}
          />
        </div>

      </div>
    )
  }
}



 <!--list.js-->

<TodoListUi
    inputValue={this.state.inputValue}
    list={this.state.list}
    change={this.change}
    add={this.add}
    removeItem={this.removeItem}
/>

# 无状态组件

取消使用类的模块创建组件，使用函数的形式创建组件。

  1. 不需要引入React重的Component模块
  2. 传递props，去掉this
const listUi = (props) => {}

据说是可以提升性能。

# ajax & redux

没啥好说的

componentDidMount () {
axios.post('http://192.168.31.228:1234/user/findAll').then(res => {
  const action = getListAction(res.data.data)
  store.dispatch(action)
})
}

← Redux - 03 →