React Redux writes a todoList

preface

When I wrote about Redux, a lot of people said, “Ah! You involve too much knowledge. I can’t learn it. Is there anything simpler?

After a while, I decided to write a simple version of Todolist using the most primitive HTML, CSS, JS and Redux to make sure you get to know Redux right away

rendering

The function points of this effect are:

1. inputBox input click+Will be added below
2. Click on something belowitemYou can delete it

To prepare

1. Add in your development environmentreact 、 redux
   • If you can’t install NPM or yarn, use NPM or yarn to install.
2. index.jsMain file, entry
3. TodoList.js‘Component file, implementation
4. store/index.jsreturnstore“, you can think of it as the bank account affecting the view update (I forget where I looked at the metaphor, I think it makes sense).
5. store/reducer.jsBank calculators, processing data. According to theaction.typeWhat do you want to do, ()=> newState calculated money 💰 will change the original deposit 💰

The source code

index.js

Inject stores into the TodoList component through the Provider

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import {Provider} from 'react-redux';/ / providers
import store from './store'
import './index.css';

const App=(
  <Provider store={store}>
    <TodoList/>
  </Provider>
)

ReactDOM.render(App,document.getElementById('root'))
Copy the code

TodoList.js

import React from "react";
import { connect } from "react-redux"; / / linker


const TodoList = (props) = > {
  let { inputValue,list,inputChange,clickBtn,deletItem} = props;
  return (
    <div className='content'>
      <div className='todoListDiv'>
        <div className='inputDiv'>
           <input value={inputValue} onChange={inputChange} />
           <button onClick={clickBtn}></button> 
        </div>
        <div className='listDiv'>
          <ul>
            {list.map((item, index) => {
              return <li key={index} onClick={deletItem}>
                {item}
              </li>;
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};

// Static data
const stateToProps = (state) = > {
  return {
    inputValue: state.inputValue,
    list: state.list,
  };
};

/ / method
const dispatchToProps = (dispatch) = > {
  return {
    inputChange(e) {
      let action = {
        type: "change_input".value: e.target.value,
      };
      dispatch(action);
    },
    clickBtn() {
      let action = {
        type: "add_item"}; dispatch(action); },deletItem() {
      let action = {
        type: "delete_item"}; dispatch(action); }}; };export default connect(stateToProps, dispatchToProps)(TodoList);

Copy the code

With connect, we can get the value of state at the stateToProps and inject it into the props. As we can see, we can get the values of inputValue and list at the props.

Similarly dispatchToProps, these methods inputChange clickBtn, deletItem can also on the props, written in dispatch (action) corresponding to the reducer. Js file:

reducer.js

const defaultState ={
    inputValue:'Hearling'.list:[]
}


export default (state = defaultState,action)=>{
    if(action.type === 'change_input') {let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }

    if(action.type === 'add_item') {let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue=' '
        return newState
    }
    return state
}
Copy the code

Identify what action to do with action.type, which updates the store

store.js

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store
Copy the code

Provide the store

inex.css

.content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient( 
    62deg, rgb(135 94 215 / 48%) 13%, rgb(161 122 255 / 29%) 4%), linear-gradient( 
    44deg, rgba(0.43.99.0.0792209024) 39%, rgb(242 140 206 / 29%) 18%), linear-gradient( 
    118deg, rgba(84.202.242.0.0315299727) 40%, rgba(215.152.218.0.5) 54%), linear-gradient( 
    58deg, rgba(246.171.236.0.161) 83%, rgba(240.193.230.0.909) 23%);
}
.todoListDiv{
    border-radius: 8px;
    width: 480px;
    background-color: #10101d;
    padding: 24px;
}
input{
    width: 100%;
    padding: 0 4px;
    border: none;
    border-bottom: 1px solid #fff;
    background-color: transparent;
    color: #fff;
}
button{
    width: 44px;
    height: 41px;
    border-radius: 50%;
    background-size: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url('add.svg')
}
.inputDiv{
    display: flex;
}
ul{
    list-style: none;
    padding: 0;
}
li{
    background-color: rgb(136 130 147 / 48%);
    border-radius: 4px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    padding: 8px;
    color: #e9e2f5;
}
Copy the code

Adding CSS is adding soul

If this is the head of the chopped pepper fish then the chopped pepper and seasoning is the soul of the dish

Thinking time 🤔

It does work, but I want you to know that this little feature is flawed. Here is a reference to the actual development of the possible problems:

The lack of function

1. First of all, I intentionally wrote a deletion of the code logic, I hope you can understand the self-implementation of this function
2. Timing function can be added
3. You can add categories
4. Cloud storage

To optimize the space

1. The current value will be removed when the page is refreshed, and the value will need to be saved
2. It’s different from the actual projectmockInterface data acquisition
3. inReact hookThat’s not what it says in
4. How can we write code that is more readable when we have a lot of data or methods?

conclusion

Thank you so much for reading this, and if you think it’s good, give it a thumbs up at ⭐

Today is also trying to “become strong and bald” HearLing ❤️