Redux Demo

擼了今年阿里、頭條和美團的面試，我有一個重要發現.......>>>

關於Redux的一個簡單的例子。

import { combineReducers, createStore } from 'redux';

import Handlebars from 'handlebars';

const source = ` <div class="oprate"><p> 文章列表: 總數 {{posts.length}}</p>
                {{#if posts}}
                  <ul>
                  {{#each posts}}
                  <li>{{this.id}} --- {{this.title}}</li>
                  {{/each}}
                  </ul>
                {{/if}}
                <p> 用戶信息： 是否登錄：{{user.isLogin}}</p>
                {{#if user.isLogin}}
                  用戶郵箱：{{user.userData.email}} 用戶名：{{user.userData.name}}
                {{/if}}</div>`;

const template = Handlebars.compile(source);

function displayPage(data) {
  const html = template(data);
  document.body.innerHTML += html;
  console.log(data);
}

// inital states
const initalPostsState = [];

const initalUserState = {
  isLogin: false,
  userData: {

  }
};


// action names
const CREATE_POST = 'CREATE_POST';
const DELETE_POST = 'DELETE_POST';
const USER_LOGIN = 'USER_LOGIN';

// action creators
function createPost(data) {
  return {
    type: CREATE_POST,
    data
  };
}
function deletePost(id) {
  return {
    type: DELETE_POST,
    id
  };
}
function userLogin(data) {
  return {
    type: USER_LOGIN,
    data
  };
}
//reducer
function posts(state = initalPostsState, action) {
  switch (action.type) {
    case CREATE_POST:
      return [...state, action.data];
    case DELETE_POST:
      return state.filter(post => post.id !== action.id);
    default:
      return state;
  }
}

function user(state = initalUserState, action) {
  switch (action.type) {
    case USER_LOGIN:
      return Object.assign({}, state, {
        isLogin: true,
        userData: action.data
      });
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  posts,
  user
});
//store
const store = createStore(rootReducer);

document.body.innerHTML += '<h2>初始化狀態</h2>';

displayPage(store.getState());

store.subscribe(() => {
  displayPage(store.getState());
});

// create two posts
document.body.innerHTML += '<h2>創建兩篇文章</h2>';
store.dispatch(createPost({ id: 1, title: 'new title' }));
// store.dispatch({type: CREATE_POST, data: {id: 1, title: 'new title'}});
store.dispatch(createPost({ id: 2, title: 'the second title' }));
// store.dispatch({type: CREATE_POST, data: {id: 2, title: 'the second title'}});

// delete one post
document.body.innerHTML += '<h2>刪除一篇文章</h2>';
store.dispatch(deletePost(1));
// store.dispatch({type: DELETE_POST, id: 1});

// User login
document.body.innerHTML += '<h2>用戶登錄</h2>';
store.dispatch(userLogin({ name: 'viking', email: '[email protected]' }));
// store.dispatch({type: USER_LOGIN, data: {name: 'viking', email: '[email protected]'}});