react redux入门示例
环境准备
为了方便,这里使用create-react-app搭建react环境
create-react-app mydemo
弹出配置
如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来。
npm run eject
安装redux
npm i redux --save
简单理解
redux简单用法就是通过它的store来订阅和发布信息。
通过subscribe来订阅action,通过dispatch来触发action。reducer中定义来各个action要做的事情。
demo代码
reducer定义
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
switch (action.type) {
case Add:
return state + 1;
case Remove:
return state - 1;
default:
return 10;
}
}
//action creator,把action封装成一个方法,这样用的时候不用每次定义,避免出错
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
ReactDOM.render(