redux初探

action是一個普通對象里面必須有一個type字段，代表將要執行的行為，其他字段自己規劃。

action只是描述了將要發生的事情并不能直接修改狀態

action創建函數盡量是一個純函數，他返回的是action對象

middleware 接受一個next() 的dispatch函數，返回了一個dispatch函數，將返回的dispatch函數作為下一個middleware的next() 一次類推可以達到鏈式的調用

它提供的是位于 action 被發起之后，到達 reducer 之前的擴展點。你可以利用 Redux middleware 來進行日志記錄、創建崩潰報告、調用異步接口或者路由等等。

不管鏈式調用幾次dispatch 最后一次調用dispatch 必須是一個action不能是其他的。來達到數據來源的起點。

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore ,compose,applyMiddleware} from "redux";
import App from "./components/app";
import reducers from './reducers/index'
import {addTodo} from './actions/index'
const enhancers = compose(
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
const store = createStore(reducers,enhancers);
const logger = (store)=>next=>action=>{
  console.log('action',action)
  let result = next(action)
  console.log('state',store.getState())
  return result
}
console.log(logger(store)(store.dispatch)(addTodo('abc')))
//手動實現一個middleware 
function middleware(stroe,middlewares){
  middlewares = middlewares.slice()
  middlewares.reverse()
  let dispatch = store.dispatch
  middlewares.forEach(middleware => {
    dispatch = middleware(stroe)(dispatch)
  })
  return Object.assign({},store,{dispatch})
}
console.log(middleware(store,[logger]))
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

let nextTodoId = 0;

export const addTodo = (text) => {
  return {
    type: "ADD",
    id: nextTodoId++,
    text,
  };
};
export const setVisibilityFilter = (filter) => ({
  type: "SET_VISIBILITY_FILTER",
  filter,
});
export const toggleTodo = (id) => ({
  type: "TOGGLE_TODO",
  id,
});
export const VisibilityFilters = {
  SHOW_ALL: "SHOW_ALL",
  SHOW_COMPLETED: "SHOW_COMPLETED",
  SHOW_ACTIVE: "SHOW_ACTIVE",
};

reducer函數接收二個參數，一個是舊的狀態樹，一個是actions對象返回的是一個新的狀態樹

可以創建多個子reducer，分別負責狀態樹中的一部分。最后創建一個根reducers

//子reducers
const todos = (state = [], action) => {
  switch (action.type) {
    case "ADD":
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false,
        },
      ];
      break;
    case "TOGGLE_TODO":
      return state.map((todo) =>
        todo.id == action.id ? { ...todo, completed: !todo.completed } : todo
      );
      break;
    default:
      return state;
      break;
  }
};
export default todos

//根reducers
import React from 'react'
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
//自定義根reducers
// const todoApp = (state={},action)=>({
//     todos:todos(state.todos,action),
//     visibilityFilter:visibilityFilter(state.abc,action)
// })
export default combineReducers({todos,visibilityFilter}) //combineReducers 將reducers 拆分成多個子reducers 并執行

最后通過createStore 將狀態樹傳遞到頁面組件樹當中

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore ,compose} from "redux";
import App from "./components/app";
import reducers from './reducers/index'
const enhancers = compose(
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
const store = createStore(reducers,enhancers);
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")

)

將redux應用到組件中時分為容器組件和展示組件，容器組件需要將展示組件連接到store上

//容器組件
import React from 'react'
import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
import {toggleTodo,VisibilityFilters} from '../actions/index'

const getVisibleTodos = (todos,filter)=>{
  switch (filter) {
    case 'SHOW_ALL':
      return todos
      break;
    case 'SHOW_COMPLETED':
      return todos.filter((todo)=>todo.completed)
      break;
    case 'SHOW_ACTIVE':
      return todos.filter(t=>!t.completed)
      break;
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = (state, ownProps) => {
  console.log(state)
  return {
    todos: getVisibleTodos(state.todos,state.visibilityFilter)
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    toggleTodo: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)

//展示組件
import React from 'react'
import Todo from './Todo'
const TodoList = ({todos,toggleTodo})=>{
  return (
    <ul>
      {todos.map(todo=>
        <Todo change={()=>toggleTodo(todo.id)} key={todo.id} {...todo} />
        )}
    </ul>
  )
}
export default TodoList

posted @ 2020-08-05 17:27 飛奔的龜龜閱讀(106) 評論(0) 收藏舉報

刷新頁面返回頂部

nianzhilian

redux初探

公告