redux的简单例子

1）Count组件：

import store from '../../redux/store'
import { creatAdd, creatJian } from '../../redux/count_action'
export default class Count extends Component {
  ///相加
  addCount = () => {
    const { value } = this.selectValue///获取当前选择的值
    store.dispatch(creatAdd(value * 1))
  }
  //相减
  lessCount = () => {
    const { value } = this.selectValue
    store.dispatch(creatJian(value * 1))
  }
  render () {
    return (
      <div>
        <h2>当前计算器的值为：{store.getState()}</h2>
        <select ref={c => this.selectValue = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.addCount}>相加</button>&nbsp;
        <button onClick={this.lessCount}>相减</button>&nbsp;
      </div>
    )
  }
}

2）创建action：

import { ADDCOUNT, CREATJIAN } from '../redux/constant'
export const creatAdd = data => ({ type: ADDCOUNT, data })
export const creatJian = data => ({ type: CREATJIAN, data })

3）store组件：

import { legacy_createStore } from 'redux'
import countReducer from './count_reducer'
///将reducer和store联系起来
export default legacy_createStore(countReducer)

4）reducer组件：

import { ADDCOUNT, CREATJIAN } from './constant'
const inin = 0
export default function countReducer (pre = inin, action) {
  ///从action解析出type和data
  const { type, data } = action
  ///通过类型进行匹配，判断怎么做
  switch (type) {
    case ADDCOUNT:
      return pre + data
    case CREATJIAN:
      return pre - data
    default:
      return pre
  }
}

5）contant常量：

为防止出现拼写错误

export const ADDCOUNT = 'addCount'
export const CREATJIAN = 'lessCount'

6）当检测到redux中的状态发生变化时要进行更新渲染

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
///在入口文件进行更新渲染
store.subscribe(() => {
  root.render(
    <App />
  )
})

最后

以上就是坚强河马为你收集整理的redux的简单例子的全部内容，希望文章能够帮你解决redux的简单例子所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。