Redux使用教程

基础部分

项目结构：

Redux大概可以分为三部分：

store、action、reducer

store状态用来存储数据(类似于vuex中的store)

action用来定义数据的类型(描述需要做的事情和携带的数据有点类似vuex中的action)

reducer用来处理action和state更细视图

代码部分：

action/indexjs:

/**
 * action的作用:描述需要做的事情和携带的数据有点类似vuex中的action
 * 1、action就是一个一个的js对象
 * 2、action必须有type属性，type属性建议纯大写
 * 3、action可以有其他的属性
 */
/* export function addUser(username){
    return{
        type: 'ADD_USER',
        username
    }
} */
export const add=()=>({
    type: 'ADD'
})
export const sub=()=>({
    type: 'SUB'
})

export const addNum=(num)=>({
    type: 'ADD_NUM',
    num
})

reducer/index.js:

//reducer用来处理action和state
const defaultCount=0
function counterReducer(state = defaultCount, action) {
    //处理action
    if(action.type==='ADD'){
        return state+1
    }
    if(action.type==='SUB'){
        return state-1
    }
    if(action.type==='ADD_NUM'){
        return state+action.num
    }
    return state
}
export default counterReducer

App.js:

import { createStore } from 'redux'
import reducer from './reducer/index'
import {add,sub,addNum} from './actions/index'
//创建store对象
let store = createStore(reducer)
console.log(store)
console.log('获取状态',store.getState())
//store派发任务
store.dispatch(add())
store.dispatch(add())

console.log('获取状态',store.getState())
store.dispatch(sub())
console.log('获取状态',store.getState())
store.dispatch(addNum(5))
console.log('获取状态',store.getState())
function App() {
  return (
    <div className="App">
     aaa
    </div>
  );
}

export default App;