redux示例

Posted 2020-11-02 LLLLily

import React from ‘react‘;
import ReactDom from ‘react-dom‘;
import {createStore} from ‘redux‘; //解构一个createStore 创建状态对象

//默认状态 state
const defaultState={
  arr:[‘qq‘,‘bmw7‘],
};

//创建reducer 纯函数 ,必须要有返回值（state)
let reducer=(state=defaultState,action)=>{
  let {type,payload}=action;
  switch (type){
    case ‘ADD_ITEM‘:
      // state.arr.push(payload) //直接修改state
      return Object.assign({},state,{
        arr: state.arr.concat(payload)
      });
      break;
    default:
      return state;
  }
};

//创建store实例对象
let store = createStore(reducer,defaultState);



//创建ToDoList组件
class List extends React.Component{
  render(){
    let arr=this.props.store.getState().arr;
    return (
      <div title="ToDoList">
        <ul>
          {
            arr.map(function(val,index){
              return <li key={index}>{val}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

ReactDom.render(
  <List store={store}></List>,
  document.querySelector(‘#app‘)
);