本節(jié)知識(shí)點(diǎn)

(1) 簡(jiǎn)介Redux作用

(2) 使用Redux

(一) Redux介紹

Redux 就是相當(dāng)于Vue中的 Vuex 存放公共數(shù)據(jù)的地方。比如兄弟之間傳值等等

(二) 使用Redux

• (1) 安裝

npm i redux -S

• (2) 在src目錄下創(chuàng)建一個(gè)store文件夾，里面創(chuàng)建一個(gè)index.js文件作為公共倉(cāng)庫(kù)

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

• (3) 創(chuàng)建reducer文件,他里面接收兩個(gè)參數(shù) state,action antion下篇在講，state就是獲取到所有的公共數(shù)據(jù)

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'
//引入倉(cāng)庫(kù)文件
import store from './store/index'
class App extends Component {
  constructor(props) {
    super(props)
   // 獲取倉(cāng)庫(kù)數(shù)據(jù)的話就是store.getState();
    console.log(store.getState())
    //輸出的結(jié)果就是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