redux学习
Posted RunningAndRunning
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了redux学习相关的知识,希望对你有一定的参考价值。
redux主要用于解决组件之间通信问题:
一、store:保存数据的地方,每个应用只能有一个store
在redux中,使用createStore函数来生成store
import { createStore } from ‘redux‘ let store = createStore(todoApp)
二、state:所有的状态,通过store.getState()函数来获取
三、action: state的变化会出发view的更新,用户只能接触view层,action就是view层发出通知,表示该更新某个state了(改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store)
/* * action 类型 */ export const ADD_TODO = ‘ADD_TODO‘; export const isLoading = ‘isLoading‘; /* * action 创建函数 */ export function addTodo(text) { return { type: ADD_TODO, text } } export function loading(text) { return {type: isLoading, text} }
四、store.dispatch()
view层通过store.dispatch()来发出action
store.dispatch(addTodo(‘Learn Redux‘));
五、Reducer:reducer用于更新state并返回一个新的state
import {ADD_TODO} from ‘./action‘ let initState = { counter: 0, isLoading: false, todos: [] } function reducer(state, action) { if (!state) { state = initState } switch (action.type) { case ‘isLoading‘: return Object.assign({}, state, { isLoading: action.text }); return state default: return state } } export default reducer
以上是关于redux学习的主要内容,如果未能解决你的问题,请参考以下文章