本节知识点

(1) 简介Redux作用

(2) 使用Redux

(一) Redux介绍

Redux 就是相当于Vue中的 Vuex 存放公共数据的地方。比如兄弟之间传值等等

(二) 使用Redux

• (1) 安装

npm i redux -S

• (2) 在src目录下创建一个store文件夹，里面创建一个index.js文件作为公共仓库

import { createStore } from 'redux'
//引入reducer
import reducer from './reducer'
//放入reducer
const store = createStore(reducer)
export default store

• (3) 创建reducer文件,他里面接收两个参数 state,action antion下篇在讲，state就是获取到所有的公共数据

const defaultState = {
  inputValue: '123',
  list: [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
  ]
}
export default (state = defaultState, action) => {
  return state
}

• (4) 组件里面引入

import React, { Component } from 'react'
import { Input, Button, List } from 'antd'
import 'antd/dist/antd.css'
//引入仓库文件
import store from './store/index'
class App extends Component {
  constructor(props) {
    super(props)
   // 获取仓库数据的话就是store.getState();
    console.log(store.getState())
    //输出的结果就是indexValue,list
    this.state = store.getState()
  }
  render() {
    return (
      <div>
        <Input
          placeholder="Basic usage"
          value={this.state.inputValue}
          onChange={this.cahngevalue.bind(this)}
          style={{ width: '300px', marginRight: '20px' }}
        />
        <Button type="primary" onClick={this.change.bind(this)}>
          提交
        </Button>
        <List
          style={{ width: '300px', marginTop: '20px' }}
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={this.state.list}
          renderItem={item => <List.Item>{item}</List.Item>}
        />
      </div>
    )
  }
  change(e) {
    console.log(e.target)
  }
  cahngevalue(e) {
    let value = e.target.value
    this.setState({
      value
    })
  }
}

export default App