redux和react-redux配合使用

入口文件index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import { Provider } from 'react-redux'
import store from './store'
const Abc = (
  <Provider store={store}>
    <App />
  </Provider>
)

ReactDOM.render(Abc, document.getElementById('root'))

App组件(无状态组件)，也可以是class XXX extends Component的类式组件，不过写法不同而已；

import React from 'react'

import { connect } from 'react-redux'

const App = (props) => {
  let { list, clickBtn, aa, inputChange } = props
  return (
    <div>
      <div>
        <input value={aa} onChange={inputChange} />
        <button onClick={clickBtn}>submit</button>
      </div>
      <ul>
        {list.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  )
}

const stateToProps = (state) => {
  return {
    aa: state.inputValue,
    list: state.list
  }
}

const dispatchToProps = (dispatch) => {
  return {
    inputChange(e) {
      let action = {
        type: 'change_input',
        value: e.target.value
      }
      dispatch(action)
    },
    clickBtn() {
      let action = {
        type: 'add_item'
      }
      dispatch(action)
    }
  }
}

export default connect(stateToProps, dispatchToProps)(App)

App类式组件

import React, { Component } from 'react'

import { connect } from 'react-redux'
class App extends Component {
  render() {
    let { list, clickBtn, aa, inputChange } = this.props
    return (
      <div>
        <div>
          <input value={aa} onChange={inputChange} />
          <button onClick={clickBtn}>submit</button>
        </div>
        <ul>
          {list.map((item, index) => {
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}
const stateToProps = (state) => {
  return {
    aa: state.inputValue,
    list: state.list
  }
}

const dispatchToProps = (dispatch) => {
  return {
    inputChange(e) {
      let action = {
        type: 'change_input',
        value: e.target.value
      }
      dispatch(action)
    },
    clickBtn() {
      let action = {
        type: 'add_item'
      }
      dispatch(action)
    }
  }
}

export default connect(stateToProps, dispatchToProps)(App)

store/index.js

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

store/reducer.js

const defaultState = {
  inputValue: 'ja131v22ab',
  list: []
}

const reducer = (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)
    newState.inputValue = ''
    return newState
  }

  return state
}
export default reducer